With CSS3, we can create animations, which can replace animated images, Flash animations, and
To create animations in CSS3, you will have to learn about the @keyframes rule.
The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes
rule and the animation will gradually change from the current style to the new style.
Internet Explorer, Firefox, and Opera does not yet support the @keyframes rule or the animation
Chrome and Safari requires the prefix -webkit-.
When the animation is created in the @keyframe, bind it to a selector, otherwise the animation
will have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:
Binding the "myfirst" animation to a div element, duration: 5 seconds:
Note: You must define the name and the duration of the animation. If duration is omitted,
the animation will not run, because the default value is 0.
An animation is an effect that lets an element gradually change from one style to another.
You can change as many styles you want, as many times you want.
Specify when the change will happen in percent, or the keywords "from" and "to",
which is the same as 0% and 100%.
0% is the beginning of the animation, 100% is when the animation is complete.
For best browser support, you should always define both the 0% and the 100% selectors.
Change the background color when the animation is 25%, 50%, and again when the
animation is 100% complete:
Change the background color and position:
The Below table lists the @keyframes rule and all the animation properties:
The two examples below sets all the animation properties:
Run an animation called myfirst, with all the animation properties set:
The same animation as above, using the shorthand animation property:
Your Query was successfully sent!