CSS3 animations also known as keyframes animation. CSS3 animations make it possible to animate almost every css property. With the help of css3 animation it is possible to creaty fency animation without using javascript & flash.


Concept of Animation

CSS3 animations are made up of two basic building blocks- Keyframes Rule & Animation Properties. @keyframes gradually change from the current style to the new style at certain times according animation properties.

Let's check an example of CSS3 animation-

 

.circle { 
  animation-name: fadeInTop;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

 

@keyframes fadeInTop {
  from { opacity: 0; top:-100px;}
  to { opacity: 1; top:0px;}
}

 

In the above example we implemented a simple css3 animation. To acheive this animation we created a @keyframes rules named fadeInTop & we used this name in animation-name property. In animation-duration we defined the duration of animation & to make repeatable animation we used animation-iteration-count.

 

@keyframes rules

@keyfraes rule gradually change the style according to animation-duration. This is the place where anyone can show his efficiency to make beautiful or complex animation.

 

We can also use 0% instead of from & 100% instead of to.

 

@keyframes fadeInTop {
  0% { opacity: 0; top:-100px;}
  100% { opacity: 1; top:0px;}
}


To create multi step animation we just need to extand our @keyframes rule. 

 

@keyframes fadeInTop {
  0% { opacity: 0; top:-100px;}
  33% { opacity: 1; top:0px;}
  66% { opacity: 1; top:0px;}
  100% { opacity: 0; top:100px;}
}

 

As the style of 33% & 66% are same we can marge these steps into one.

 

@keyframes fadeInTop {
  0%     { opacity: 0; top:-100px;}
  33%,66%{ opacity: 1; top:0px;}
  100%   { opacity: 0; top:100px;}
}

 

Animation properties

 

Property Name Description Value
animation-name Name of the @keyframes rule Example: FadeInTop
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle Example: 2s
animation-delay Specifies a delay before animation start in s/ms Example: 2s
Default value: 0
animation-iteration-count Specifies how many times an animation should run Example: 2
Default value: 1
animation-direction Specifies whether an animation should play in reverse direction or alternate cycles normal, reverse, alternate, alternate-reverse
Default value: normal
animation-timing-function Specifies the speed curve of the animation ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
Default value: ease
animation-fill-mode Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay) forwards, backwards, both, none
Default value: none
animation-play-state Specifies whether the animation is running or paused paused, running
Default value: running