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: codescracker; animation-duration: 2s; animation-iteration-count: infinite;}
      @keyframes codescracker {
         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 codescracker, 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: codescracker; animation-duration: 3s; animation-iteration-count: infinite;}
      @keyframes codescracker {
         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: codescracker; animation-duration: 3s; animation-iteration-count: infinite;

can be wrapped into this single declaration:

animation: codescracker 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

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:

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 »


Liked this post? Share it!