Explain CSS3 Animation with example.

207views

written 6.7 years ago by

teamques10 ★ 68k

• modified 6.7 years ago

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>
<html>
<head>
<style> 
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
 }

}
 </style>
 </head>
 <body>

    <div></div>

</body>
</html>

ADD COMMENT EDIT