Explain CSS3 Animation with example.

Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: Medium

ait(26) • 1.4k  views

CSS-3 Animations

  • CSS animations allows animation of most HTML elements without using JavaScript or Flash!
  • An animation lets an element gradually change from one style to another.
  • To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

  • When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
  • To get an animation to work, you must bind the animation to an element.

Standard syntax

 @keyframes example {
from {background-color: red;}
to {background-color: yellow;}

The sub-properties of the animation property are:

- animation-delay Configures the delay between the time the element is loaded and the beginning of the animation sequence.

- animation-direction Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.

- animation-duration Configures the length of time that an animation should take to complete one cycle.

- animation-iteration-count Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.

- animation-name Specifies the name of the @keyframes at-rule describing the animation’s keyframes.

- animation-timing-function Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.

Example: The following example binds the "example" animation to the

element. The animation will last for 4 seconds, and it will gradually change the background-color of the
element from "red" to "yellow":

<!DOCTYPE html>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;



Please log in to add an answer.

Continue reading

Find answer to specific questions by searching them here. It's the best way to discover useful content.

Find more