CSS Animations and Keyframes

CSS animations are a way to create multi-stage changes to an element over time. Different from CSS transitions, which define a single change between two states, animations allow for explicit control over multiple intermediate states.

The concept of keyframes is fundamental to CSS animations. If you’ve worked with animation software, familiar with keyframes. A keyframe represents a specific point in an animation where you define the desired state of an element. While a transition is basically an animation with only two keyframes (a start and an end), CSS animations allow you to define as many keyframes as you need in between. The browser then smoothly interpolates (fills in) the frames between these defined keyframes to create the animation.

CSS can handle the majority of motion requirements using transitions, transforms, or animations, where  JavaScript was  needed. Animations can add motion to the page and visual interest, but they can also convey meaningful feedback to the user.

The @keyframes Rule to Define Animation Sequences

Creating a CSS animation two main parts: defining the animation sequence using the @keyframes rule and then applying that animation to an element using the animation property or its related longhand properties.

The @keyframes rule is an “at-rule” used to define an animation.

Here is the basic syntax for the @keyframes rule:

@keyframes name { keyframe { property: value; } }

• name: This is a unique identifier you choose for the animation. It’s recommended to name the animation based on what it does, as the same @keyframes rule can be reused on multiple elements. The animation name should not be quoted according to specifications, although older examples might show quotes.
• keyframe: This sets the position along the animation’s duration where this keyframe occurs. You can specify these positions using:
  • Percentage values: You can use any percentage from 0% to 100%. You can set as many percentage points as you like.
  • Keywords from and to: from is equivalent to 0%, and to is equivalent to 100%. sticking with percentage keyframe selectors (0% and 100%) as WebKit browsers didn’t always play happily with from and to values.
  • You must specify at least two keyframes, typically 0% (or from) and 100% (or to). If 0% or from is not specified, the browser constructs it using the computed values of the animated properties. The same happens if 100% or to is not specified.
• block: Inside each keyframe, you include a CSS declaration or a series of declarations. These define the styles that will be applied to the element at that specific point in the animation. The browser will smoothly interpolate the values between keyframes. Note that inheritance operates on individual keyframes, so if you want a change to persist, you might need to specify it in multiple frames.

Example:

@keyframes warning {
  0% { text-shadow: 0px 0px 4px #000000; }
  50% { text-shadow: 0 0 20px #000000; }
  100% { text-shadow: 0px 0px 4px #000000; }
}
or using from/to:
@keyframes warning {
  from { text-shadow: 0px 0px 4px #000000; }
  50% { text-shadow: 0 0 40px #000000; }
  to { text-shadow: 0 0 4px #000000; }
}

In the above example keyframe rule named warning animates the text-shadow property. It starts and ends with a 4px blur at 0% and 100%, and transitions to a 20px (or 40px in the second version) blur at the 50% point.

Example:

@keyframes over-and-back {
      0% {
    background-color: hsl(0, 50%, 50%); /* Red */
       transform: translate(0);
                }
  50% {
           transform: translate(50px); /* Shift right */
  }
  100% {
                                       background-color: hsl(270, 50%, 90%); /* Light purple */
      transform: translate(0); /* Return to original position */
                 }
                                      }

In the above example @keyframes rule named over-and-back animates two properties: background-color and transform. The color transitions smoothly from red (at 0%) to light purple (at 100%), passing through a color between them at 50% because the color wasn’t specified at 50%. The element also moves from its original position (translate(0) at 0%) to the right (translate(50px) at 50%) and then back to the original position (translate(0) at 100%).

Once you have defined a keyframe animation using @keyframes, you apply it to an element using the animation property or its individual longhand properties.

The animation property is a shorthand for multiple properties that control how the defined @keyframes animation is applied.

CSS3 Topics