Animation in CSS

Animation in CSS allows you to specify the change in the properties of CSS elements. Transition feature also allow you to change the properties of elements but it provides a little features to do that. In order to take this concept further, the CSS3 comes with keyframe based animations that allow you to specify the change in CSS properties.

In order to use CSS animation, you must first specify some keyframes for the animation. You must specify two properties animation-name and animation-duration for animation to occur.

There are following properties of animation:

  • @keyframes: The animation code holds here.
  • animation-name: It specifies the name of @keyframes animation.
  • animation-duration: It decides how much time an animation should take to complete one cycle.
  • animation-delay: Sets a delay to start first animation.
  • animation-iteration-count: Sets the number of times for an animation to run.
  • animation-direction: Sets the direction of an animation. It takes forwards, backwards or an alternate direction.
  • animation-timing-function: Specifies the speed curve of an animation.
  • animation-fill-mode: Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
  • animation: It is the shorthand property of an animation.

@keyframe rule

Keyframes are used to run animation in CSS by specifying the values of animating properties at various stages of animation. CSS uses @keyframes property to implement keyframes rule. The keyframes selector to style keyframes rule starts with % sign or the keyword from (which means 0%) and ends with keyword to (which means 100%).

The duration of animation has been represented by (%) sign, 0% represents the starting point of the animation, 100% represents the end point, 50% represents the midpoint and so on. That means, a 50% keyframe in a 2s animation would be 1s into an animation.

The animation name and animation duration is used to run animation in CSS. Let us write a code to run animation in CSS.

<!DOCTYPE html>
<html>
<head>
<style> 
#animation1{
  width: 100px;
  height: 100px;
  background-color: rgb(51, 255, 0);
  position: relative;
  animation-name: firstanimation;
  animation-duration: 4s;
}
#animation2{
  width: 100px;
  height: 100px;
  background-color: rgb(133, 19, 104);
  position: relative;
  animation-name: secondanimation;
  animation-duration: 2s;
  animation-iteration-count: 3;
}

@keyframes firstanimation {
  0%   {background-color:rgb(216, 94, 94); 
        left:0px; 
        top:0px;
        }
  25%  {background-color:rgb(61, 61, 18); 
       left:200px; 
       top:0px;
       }
  50%  {background-color:rgb(36, 162, 179); 
       left:200px; 
       top:200px;
       }
  75%  {background-color:rgb(75, 172, 75); 
       left:0px; 
       top:200px;
       }
  100% {background-color:red; 
       left:0px; 
       top:0px;
       }
}
@keyframes secondanimation{
    from{
        width:0%;
    }
    to{
        width:50%;
    }
}
</style>
</head>
<body>
<div id="animation1"></div>
<div id="animation2"></div>
</body>
</html>

In above code, the first animation will rotate a square in square form. The second animation will change its width from 0% to 50%.

To see the results of these animations, just copy above code and paste it in notepad and run with browser.

Setting animation-delay in CSS

In order to start animation after sometime, then you can use the animation-delay property. Animation delay property starts an animation with delay in seconds. You cannot apply negative values. The following code is showing the animation-delay property.

div {
  width: 150px;
  height: 150px;
  position: relative:
  animation-name: move;
  animation-duration: 3s;
  animation-delay: 3s;
}

Setting animation-iteration-count in CSS

The animation-iteration-count property decides how many times an animation will run. The following example will run animation 4 times.

div {
  width: 150px;
  height: 150px;
  position: relative:
  animation-name: move;
  animation-duration: 3s;
  animation-delay: 3s;
  animation-iteration-count:4;
}

Setting animation direction in CSS

The animation-direction property can take the following values:

  • normal: It is the default value and it plays animation in forward direction.
  • reverse: It plays animation in backward direction.
  • alternate: In alternate value, the animation is played in forward direction an then towards backward direction.
  • alternate-reverse: It plays animation opposite to alternate direction.

Setting animation-timing-function in CSS

This property specify the speed curve of an animation. It can take the following values.

  • ease: It is default value. It starts animation with slow start then proceeds fast and in the end stops slowly.
  • linear: Specifies an animation with same speed of time from start to end.
  • ease-in: Specifies an animation with slow start.
  • ease-out: Specifies an animation with slow end.
  • ease-in-out: Play an animation with a slow start and slow end.

You might be interested in reading:

2D transformation of an element in CSS