The best place to learn to use transitions and animations is John Allsopp’s tutorial.
Animations are essentially timed transitions. You can define several steps and break-points in the transition of one set of styles to another. If that’s done properly an animation results.
This page only tests the animation properties. If the underlying transition is not supported you can expect problems.
Here are tests for the vendor prefixes. Click on the test elements. These are also tests for keyframes,
A delay of one second.
The animation is repeated twice.
The second time the animation plays, will it play it the same as the first time or reversed?
What happens to the element during an animation-delay? What happens after the animation has ended?
forwards specifies the styles of the last keyframe will remain applied after the animation
has ended, while
says the styles of the first keyframe will be applied during the delay.
both says both
should occur. The default is
none: do nothing.
There’s a delay of 1 second.