CSS animation guide for novices

CSS animation guide for novices

0 38310
CSS animation guide for novices

Anyone who lands up on your website would need a reason to stay. CSS i.e Cascading Style Sheets gives you that reason. CSS is basically a way to style your web pages and also to create animations. CSS Animations let you inspirit your website. No matter how useful content you have supplied on the website, everyone will not take out time to read it fully. Animations grab the attention of the user which leads to better conversions. Animations enhance the user experience and add value to your pages.

To begin with, start with the two basic building blocks of CSS3:

1. Keyframes:

Using this property, you can define stage and style of the animations. Keyframes are the foundation for animation in CSS. They define the look of animation at each stage of the animation timeline. It is written as @keyframes and each of them has the following components:
(a) Name: It includes the name of the animation which is written just after @keyframes.
(b) Stage: The stage of the animation can be depicted in terms of percentage. From 0% being the beginning stage to 100% being the ending stage you can define any stage and also the intermediate stages.
(c) CSS Styles: You can use various CSS properties at each stage of the animation.


@keyframes bounceOut {
  0% {
    transform: scale (0.1);
  45% {
    transform: scale (5.5);
  100% {
    transform: scale (0.1)
@keyframes testIn {
  From {
    opacity: 1;
  To    {
    opacity: 0;

2. Animation Properties:

Once you have defined the stages and styles of the animation, you need to actually define how the animation should work. Animation property is used to call the @keyframes inside the CSS selector. Therefore the purpose of using Animation properties is:
(a) To assign @keyframes to the elements you wish to animate.
(b) To define the behavior of the animations
There are multiple animation properties but the two most important are:
1. animation-name: Same as the name defined in @keyframes.
2. animation-duration: It defines the duration of the animation, say 5 seconds or 10 seconds.


test {
  animation-duration: 4s;
  animation-name: bounceOut;

Let us see more animation properties and how to use them effectively.

  1. animation-timing-function: It sets the animation speed. You can set any of the existing timing functions which are linear, ease, ease-in, ease-out and ease-in-out. You can also create custom timing function using cubic-bezier curve.
    Syntax: animation-timing-function: ease-in;
  2. animation-delay: You can define the delays in between the animations you use. You can define both positive and negative time delay. The positive value, say 3s will indicate that the next animation will start after 3s whereas the negative value depicts that the animation will be started at once but it will start 3s into the animation.
    Syntax: animation-delay:3s;
  3. animation-iteration-count: It defines the count of the animation. If you want to iterate any animation, you can use it with this property. It can have the following values:
    (i) #: It depicts a specific number.
    (ii) infinite: It lets the animation run forever.
    (iii) initial: It sets its value to default.
    (iv) inherit: It lets the element inherit the value from its parent.
    Syntax: animation-iteration-count: 3;
  4. animation-direction: It specifies the direction of the animation. It can be normal, reverse or alternate.
    (i) normal: The animation plays forward when we choose normal.
    (ii) reverse: With this option, the animation plays backward.
    (iii) alternate: The animation plays alternatively i.e. once forward then backward and so on.
    Syntax: animation-direction : alternate;
  5. animation-fill-mode: With this property, you can specify which styles will be applied to the element when animation finishes. You can choose from the following styles:
    (i) backwards: The styles are inherited from the initial @keyframes. (Before the beginning of the animation)
    (ii) forwards: It lets the element retrain the styles from the final @keyframes. (After the end of the animation)
    (iii) both: It will collaborate the rules of both backwards and forward mode.
    (iv) normal: It does not apply any styles to the element.
    Syntax: animation-fill-mode: both;
  6. animation-play-state: You can specify whether the animation is playing or paused. Whenever you resume the paused animation, it will play from where it was left-off. It can be:
    (i) playing: It depicts the running state of the animation.
    (ii) paused: It depicts the paused state of the animation.
    Syntax: animation-play-state: paused;

Let us create a blinking effect using the above properties:

.element {
  animation-name: Blink;
  animation-duration: 6s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;

This will create a blinking effect which has the delay of 1 second and total duration of the animation is 6 seconds. It count is infinite so there is no limit to the animation and its direction is alternate.

Adding multiple animations

You can also add multiple animations with the use of a comma separator in the CSS file.

.element {
  animation: Fade 4s 1s infinite linear alternate,
             Rotate 4s 1s infinite linear alternate;

Here we have used the animation shorthand in which we do not need to write the property name but we directly write the values. So, Fade is the animation-name, 4s is the animation-duration, 1s is the animation-delay, infinite is the animation-iteration-count, linear is the animation-timing-function and alternate is the animation-direction.
In the above example we have added two animations to one element; Fade and Rotate.
Note: You need to define Fade and Rotate in @keyframes first.

Author Bio: Nirdosh has a knack for exploration and loves to dig into WordPress, and share her knowledge with others. She is currently working with WP Daily Themes. She is also a programmer, a writer and a motivational speaker.



Leave a Reply