Introduction To CSS3 Animations

This blog is a continuation of the previous CSS3 blog in this chain. In this blog we will be discussing about Animation and how it can be done? So, what is Animation?
Animation is the process of making shape changes as well as creating motions with elements. CSS3 allows animation of most HTML elements without using JavaScript or Flash. An animation lets an element gradually change from one style to another.
Now that we understand Animation, the next thing that comes in mind is – How can Animation be done? The answer is – “By using ‘keyframes’ feature”.

Using @keyframes

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at the time interval.
Keyframes will control the intermediate animation steps in CSS3.

Example of keyframes:

Sub-properties:

1. animation-name: name of the @keyframes at-rule to manipulate.
2. animation-duration: the length of time it takes for an animation to complete one cycle.
3. animation-timing-function: establishes preset acceleration curves such as ease or linear.
4. animation-delay: the time between the element being loaded and the start of the animation sequence.
5. animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.
6. animation-iteration-count: the number of times the animation should be performed.
7. animation-fill-mode: sets which values are applied before/after the animation.
8. animation-play-state: pause/play the animation.

Let us now discuss some of these sub-properties:

• animation-duration:

In the above example animation-duration is specified as 4s.

• animation-timing-function:

  #div1 {animation-timing-function: linear;}
  The animation-timing-function value can be linear, ease, ease-in, ease-out or ease-in-out.

• animation-delay:

  #div {animation-delay: 4s;}
  The animation-delay value can be an integer value.

• animation-direction:

  #div {animation-direction: reverse;}
  The animation-direction can be reverse or alternate.

• animation-iteration-count:

  To set how many times the animation should run, one can use animation-iteration-count. The value can be integer number or if you require to repeat the animation infinite times you can set the value to infinite. Example for infinite animation:
  div{
  animation-duration: 4s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  }

• animation-fill-mode:

  The value can be changed to none, forwards, backwards, both, inherit or initial.
  #div{animation-fill-mode: forwards;}

• animation-play-state:

  The value can be changes to paused, running, initial or inherit.
  #div{animation-fill-mode: paused;}

Conclusion:

I hope you have learnt all the animation functions. If you have any query, do write to us at support@acadgild.com