Introduction to CSS Animations

CSS animations allow you to animate HTML elements without using JavaScript or Flash! CSS animations consist of two components:

1. A set of CSS styles that indicate the starting and ending states of the animation. This is handled by the @keyframes rule.
2. A set of animation properties that specify how the animation sequence should play.

CSS Animations: Keyframes (@keyframes)

The @keyframes rule specifies the animation sequence. It works by defining styles at different points, called "keyframes," during the animation. Each keyframe defines the style of the element at that specific point in the animation sequence. Keyframes are defined using percentages (0% to 100%) or keywords from (equivalent to 0%) and to (equivalent to 100%). The keyframe block allows you to define multiple style changes that happen across the animation duration.

 @keyframes example {
  0%   {background-color: red; left:0px; top:0px;}
  25%  {background-color: yellow; left:200px; top:0px;}
  50%  {background-color: blue; left:200px; top:200px;}
  75%  {background-color: green; left:0px; top:200px;}
  100% {background-color: red; left:0px; top:0px;}
} 

Animation Properties

These properties control how the animation sequence plays out. They must be applied to the element you wish to animate.

• animation-name: Specifies the name of the @keyframes rule to bind to the element. This is required. If you don't give the animation a name, nothing will happen. Example: animation-name: slideIn;
• animation-duration: Specifies the length of time an animation should take to complete one cycle. Measured in seconds (s) or milliseconds (ms). This is required. If the duration is 0s, the animation will not run. Example: animation-duration: 2s;
• animation-timing-function: Specifies the speed curve of the animation. Examples: linear, ease (default), ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n). Example: animation-timing-function: ease-in-out;
• animation-iteration-count: Specifies the number of times an animation should run. Can be a number (e.g., 2) or infinite. Example: animation-iteration-count: infinite;
• animation-direction: Specifies whether the animation should play forwards, backwards, or in alternate cycles. Options: normal (default), reverse, alternate, alternate-reverse. Example: animation-direction: alternate;
• animation-fill-mode: Specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both). Options: none (default), forwards, backwards, both. Example: animation-fill-mode: forwards;
• animation-play-state: Specifies whether the animation is running or paused. Options: running (default), paused. This allows you to control the animation dynamically, often using JavaScript. Example: animation-play-state: paused;
• animation-delay: Specifies a delay for the start of an animation. The value is defined in seconds (s) or milliseconds (ms). Example: animation-delay: 1s;

Example Animation

This example creates a box that slides from left to right and back again.