CSS animations allow for elements to gradually change from one style to another or create movement on the page using keyframes to store the animation data.

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the updated style at specific times.

The animation will always be bound to a specified element or elements.

The following has a “from” frame and “to” frame, which are essential a start and end.

/* the element to animate */
div {
    width: 20px;
    height: 120px;
    background-color: red;
    opacity: 1.0;
    position: relative;
    top: 0;
    left: 0;
    animation-name: move-div;
    animation-delay: 2s;
    animation-duration: 3s;
    animation-iteration-count: 4;
}
/* the animation */
@keyframes move-div {
    from {
        left: 0;
        opacity: 1.0;
    }
    to {
        left: 300px;
        opacity: 0;
    }
}

Reload the page, and the following element will wait 2 seconds and then animate over 3 seconds, 4 times.

We can also use percentages to set multiple frames to change the animation multiple times.

In the following, we have three frames. The first is the starting point which animates to a midpoint and then to an endpoint. And because we have the animation-iteration-count set to infinite, it starts back over again and never stops.

/* the element to animate */
div {
    width: 20px;
    height: 120px;
    background-color: red;
    opacity: 1.0;
    position: relative;
    top: 0;
    left: 0;
    animation-name: ping-pong;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
/* the animation */
@keyframes ping-pong {
    0% {
        left: 0;
        background-color: red;
    }
    50% {
        left: 95%;
        background-color: blue;
    }
    100% {
        left: 0;
        background-color: red;
    }
}

The following element will bounce from left to right and back to left again infinite times while changing colors.

• CSS – animation Property
  The animation property is a shorthand property for all the other properties a CSS animation can be given.
• CSS – animation-delay Property
  The animation-delay property specifies a delay for the start of an animation defined in seconds (s) or milliseconds (ms).
• CSS – animation-direction Property
  The animation-direction property defines whether an animation should be played forwards, backwards, or in alternate cycles.
• CSS – animation-duration Property
  The animation-duration property defines how long, in seconds (s) or milliseconds (ms), an animation should take to complete one cycle.
• CSS – animation-fill-mode Property
  The animation-fill-mode property specifies a style for the element when the animation is not playing – both before it starts and after it ends.
• CSS – animation-iteration-count Property
  The animation-iteration-count property specifies the number of times an animation should play before stopping.
• CSS – animation-name Property
  The animation-name property specifies a name for a @keyframes animation.
• CSS – animation-play-state Property
  The animation-play-state property specifies whether the animation is running or paused, and JavaScript can be used to pause the animation in mid cycle.
• CSS – animation-timing-function Property
  The animation-timing-function defines the speed curve of an animation, which is the time it takes to change from one set of styles to another (how smooth).
• CSS – @keyframes Rule
  The @keyframes rule defines the animation timeline, which gradually changes from one set of CSS styles to another.