When we talk about creating animations, this could be taken to mean that we're moving content; while this is perfectly true, we're not limited to simply moving elements. We could equally transition elements from one state to another or bend and manipulate their appearance on the screen. Let's take a look at each animation type in more detail, beginning with animations.
Animating content is used to move objects and can be used as an alternative to using Flash. They define what happens to a set of element's properties—we can control how these properties behave when defining our animation, including their frequency.
The key difference between animations and transitions is that animations can be fired without any user interaction, as soon as a page loads. Transitions can only be fired when an element becomes active, such as a button element or a div element.
A simple animation will follow this format:
animation: <name of animation> <duration...