Others


Others


CSS Animations


CSS animation is a method to change an element from one state to another by changing its properties over a specified period of time.

Animation Properties:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-timing-function
  • animation-play-state

@keyframes

The @keyframes rule defines a set of keyframes that describe how the element's properties should change over time.

Syntax 
@keyframes sample1{
  from{ css_property : value;}
  to{ css_property : value;}
}

@keyframes sample2 {
  0%   {css_property : value;}
  25%  {css_property : value;}
  50%  {css_property : value;}
  100% {css_property : value;}
}

animation-name

The animation-name property specify the name of the @keyframes describing an animation.

animation-duration

The animation-duration property specifies the time duration it takes for the animation to complete one cycle.

Example 
#box {
  width: 100px;
  height: 100px;
  position:absolute;
  background-color: red;
  animation-name: sample;
  animation-duration: 5s;
}

@keyframes sample {
  from  {left:0px; top:0px;}
  to    {left:100px; top:100px;}
}
Try it Yourself

animation-delay

The animation-delay property specifies the delay before the animation starts.

Example 
#box {
  width: 100px;
  height: 100px;
  position:absolute;
  background-color: red;
  animation-name: sample;
  animation-duration: 5s;
  animation-delay: 3s;
}

@keyframes sample {
  from  {left:0px; top:0px;}
  to    {left:100px; top:100px;}
}
Try it Yourself

animation-iteration-count

The animation-iteration-count property specifies the number of times the animation should repeat.

Note : uses the value infinite for continuous repetition.

Example 
#box {
  width: 100px;
  height: 100px;
  position:absolute;
  background-color: red;
  animation-name: sample;
  animation-duration: 2s;
  animation-iteration-count:3;
}

@keyframes sample {
  from  {left:0px; top:0px;}
  to    {left:100px; top:100px;}
}
Try it Yourself

animation-direction

The animation-direction property specifies whether the animation plays normal, reverse, alternate, and alternate-reverse

  • normal - (default) Plays the animation forward.
  • reverse - Plays the animation in the reverse direction
  • alternate - Plays the animation forwards first, and then backward
  • alternate-reverse - Plays animation backwards first, and then forwards
Example 
#box1 { animation-direction:reverse; }
#box2 { animation-direction:alternate; }
#box3 { animation-direction:alternate-reverse; }
Try it Yourself

animation-fill-mode

The animation-fill-mode property defines the values of the animated properties before and after the animation plays.

  • none - (default) The element will use its original styles.
  • forwards - After the animation completes, the element will retain the styles from the last keyframe of the animation.
  • backwards - The element will take on the styles defined in the first keyframe of the animation even before the animation starts playing.
  • both - Combines the effects of both forwards and backwards.
Example 
#box1 { animation-fill-mode:none; }
#box2 { animation-fill-mode:forwards; }
#box3 { animation-fill-mode:backwards; }
#box4 { animation-fill-mode:both;}
Try it Yourself

animation-timing-function

The animation-timing-function property specifies the speed curve of the animation.

  • ease - (default) The animation starts slowly, then fast, and then finally ends slowly
  • linear - The animation plays with the same speed from start to end.
  • ease-in - The animation with a slow start.
  • ease-out - The animation with a slow end.
  • ease-in-out - The animation both starts and ends slow.
  • cubic-bezier(n,n,n,n) - The animation plays with own values
Example 
#box1 {animation-timing-function: ease;}
#box2 {animation-timing-function: linear;}
#box3 {animation-timing-function: ease-in;}
#box4 {animation-timing-function: ease-out;}    
#box5 {animation-timing-function: ease-in-out;}
#box6 {animation-timing-function: cubic-bezier(0.3,0.5,1,0.2);}
Try it Yourself

animation-play-state

The animation-play-state property specifies whether the animation is running or paused.

  • running - (default) Specifies that the animation is running
  • paused - Specifies that the animation is paused.
Example 
#box1 {animation-play-state:running;}
#box2 {animation-play-state:paused;}
Try it Yourself

Animation Shorthand Property

Example 
#box{
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}