CSS Animations

In CSS, Animations can be added to the HTML components without using any JS. Animations allow an HTML element to gradually change its style.

Keyframe-based animations in CSS3 take things a step further, allowing you to identify the changes in CSS properties over time as a sequence of keyframes, similar to flash animations. As seen in the example below, CSS animations are created in two stages:

• Defining individual keyframes and naming an animation with a keyframes declaration is the first step in developing a CSS animation.
• The second move is to use the animation-name property to refer to the keyframes by name, as well as to add animation-duration and other optional animation properties to control the animation's actions.

Before referencing or applying the keyframes rules, however, it is not appropriate to describe them. Using the CSS3 animation function, the following example will show you how to animate a <div> box horizontally from one location to another.

.box {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  /* Chrome, Safari, Opera */
  -webkit-animation-name: moveit;
  -webkit-animation-duration: 5s;
  /* Standard syntax */
  animation-name: moveit;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
  from {left: 0;}
  to {left: 50%;}
}
/* Standard syntax */
@keyframes moveit {
  from {left: 0;}
  to {left: 50%;}
}

Output:

To make the animation happen, you must define at least two properties: animation-name and animation-duration (greater than 0). Many of the other animation properties, on the other hand, are optional because their default values do not preclude an animation from occurring.