css-transition

You create a CSS Animation by defining an animation in @keyframes.

@keyframes animation-name {
  0% {
    margin-left: 0px;
  }

  50% {
    margin-right: 400px;
  }

  100% {
    margin-left: 0px;
  }
}

In the keyframes above, the 0%50% and 100% values are points on an animation timeline. It means the following:

  1. Begin the animation (0%) with margin-left set to 0px.
  2. Animate margin-left to 400px as the animation continues to the the middle of the animation duration (50%)
  3. Animate margin-left to 0px as the animation continues to the end (100%)

You can add any number of points on the @keyframes declaration. Each point you add should be a percentage value. (You can also substitute from for 0% and to for 100%).

@keyframes animation-name {
  0% {
    margin-left: 0px;
  }

  25% {
    margin-right: 200px;
  }

  50%, {
    margin-right: 400px;
  }

  75% {
    margin-right: 200px;
  }

  100% {
    margin-left: 0px;
  }
}

If your @keyframes points contain similar properties (like in the above case), you can stack the points together to compact the @keyframesdeclaration.

@keyframes animation-name {
  from, to {
    margin-left: 0px;
  }

  25%, 75% {
    margin-right: 200px;
  }

  50% {
    margin-right: 400px;
  }
}

Using the animation

You can use the animation you’ve created with the animation property. Like transitionanimation is a short hand for a handful of animation- properties (8 in total).

.component {
  animation-name: name;
  animation-duration: duration;
  animation-timing-function: timing-function;
  animation-delay: delay;
  animation-iteration-count: count;
  animation-direction: direction;
  animation-fill-mode: fill-mode;
  animation-play-state: play-state;

  /* OR */
  animation: name
             duration
             timing-function
             delay
             iteration-count
             direction
             fill-mode
             play-state;
}

animation-name is the name of the animation you created with the @keyframes syntax. You can include more than one animation by separating them with commas.

Also Read: 
Top 5 Responsive CSS Framework

animation-duration is the duration of the animation. It is written in seconds with the s suffix, like 3s. It is also a required value.

animation-timing-function is the timing-function used for the animation. It has the same syntax as a transition-timing-function. If left out, it defaults to ease.

animation-delay is the delay before starting the animation. It creates a delay for every iteration of the animation and is written in seconds with the s suffix, like 3s. If left out, it defaults to 0s.

animation-iteration-count tells CSS how many times you want the animation to occur. It takes in a number value. If you want the animation to loop infinitely (until you say stop), use infinite. If left out, it defaults to 1.

animation-direction is the direction of the animation. More on animation-direction below.

animation-fill-mode tells CSS what to do when the animation ends. More on animation-fill-mode below.

animation-play-state determines the state of the animation. It can either be running (which means the animation is playing) or paused. If left out, it defaults to running.

Animation-direction

animation-direction tells CSS to play the animation from 0% to 100% or vice versa.

If the animation-direction is set to normal, the animation plays from 0% to 100%.

If the animation-direction is set to reverse, the animation plays from 100% to 0%.

If the animation-direction is set to alternate, the animation plays from 0% to 100% first, then plays from 100% to 0%, and from 0% to 100% again, until the animating-iteration-count runs out.

If the animation-direction is set to alternate-reverse, the animation plays from 100% to 0% first, then plays from 0% to 100%, and from 100% to 0% again, until the animating-iteration-count runs out.

Leave a Reply

Your email address will not be published. Required fields are marked *