With CSS3 animations, you can implement the similar animation effects as Flash and Javascript do. Although we have introduced many simple animation effects implemented with transform and transition, the transition can only accomplish two state change, from one style to another style; however, animation can do the feat, acting with a series of frames.
Animation, background color change
Standard syntax:@ keyframes animation-name. In the code above, you define the animation name and a series of action, like in the example below: 0%…., 25%…., 50%…., 100%….
Then in another css element, here is #animations-color, you use property animation-name: animationSequence; to point to the @keyframe. Use animation-duration: 30s; to specify the animation duration, 30 seconds.
Animation, move
In the example below, the green square counter-clockwisely moves around the four corners; and then clockwisely moves around the four corner. In addition to the animation properties in the example above, we introduces two new properties:
1 animation-iteration-count : infinite; animation proceeds infinitively
2 animation-direction: alternate-reverse; animation changes direction alternatively: in the example,counter-clockwise and clockwise aterlyatively.