CSS Animation

In CSS, an animation is the change in styles. Therefore, to animate an element, we need to change its style, for multiple times. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd{width: 50px; height: 50px; position: relative;
         animation-name: fresherearth; animation-duration: 2s; animation-iteration-count: infinite;}
      @keyframes fresherearth {
         from {background-color: maroon;}
         to {width: 100px; height: 100px; background-color: black;}
      }
   </style>
</head>
<body>
   
   <div id="myd"></div>
   
</body>
</html>

Output

In above example, the element DIV whose id is myd is selected and styled. While styling, I've defined the animation-name property, with name fresherearth, and bound the name with @keyframes to change its style for multiple (two) times.

Tip - Use percentage (%) selector in @keyframes, to change style for more than two times. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd{position: relative;
         animation-name: fresherearth; animation-duration: 3s; animation-iteration-count: infinite;}
      @keyframes fresherearth {
         0% {left: 0px; top: 0px; width: 50px; height: 50px; background-color: maroon;}
         25% {left: 220px; top: 0px; width: 100px; height: 100px; background-color: black;
              border-radius: 50%;}
         50% {left: 220px; top: 220px; width: 50px; height: 50px; background-color: maroon;
              border-radius: 0%;}
         75% {left: 0px; top: 220px; width: 100px; height: 100px; background-color: black;
              border-radius: 50%;}
         100% {left: 0px; top: 0px; width: 50px; height: 50px; background-color: maroon;
              border-radius: 0%;}
      }
   </style>
</head>
<body>
   
   <div id="myd"></div>
   
</body>
</html>

Output

You can define/use multiple selectors to change style for multiple times, in one animation cycle. Also, we can define any number of styles to any selector.

In above example, then following CSS code:

animation-name: fresherearth; animation-duration: 3s; animation-iteration-count: infinite;

can be wrapped into this single declaration:

animation: fresherearth 3s infinite;

The default value of animation-duration property is 0. Therefore, this property is required to define, to animate an element.

List of All CSS Properties related to Animation

animation-name - used to define name for an animation
animation-duration - used to define time to complete one iteration or cycle of animation
animation-timing-function - used to define the speed curve of an animation, or define the way to process an animation
animation-delay - used to delay the animation start
animation-iteration-count - used to define the total number of iterations or cycles for an animation to play
animation-direction - used to define the direction of an animation
animation-fill-mode - used to define style when the animation is not playing
animation-play-state - used to pause or play an animation

Important - One more and the important CSS topic is, @keyframes, that is used to define the change in styles for multiple times in one cycle of selected animation.

animation is itself a Property in CSS

The animation is itself a property in CSS, that is used to define all the above properties at once. The syntax of animation property in CSS, is:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

Therefore, the animation property can also be used as shorthand of following properties:

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

Either we can define all the above properties at once, or can define one, two, or any number of properties. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd{width: 50px; height: 50px; background-color: maroon; position: relative;
         animation: myanim 3s ease-in-out 2s infinite;}
      @keyframes myanim {
         from {background-color: blue;}
         to {width: 100px; height: 100px; background-color: black;}
      }
   </style>
</head>
<body>
   
   <div id="myd"></div>
   
</body>
</html>

Output

CSS Online Test

« Previous Tutorial Next Tutorial »