Animation Direction in CSS3
Submitted by alpha_luna on Wednesday, April 22, 2015 - 23:52.
Language
What is animation-direction?
The 
animation-direction property
specifies whether or not the animation should play in reverse direction or in alternate cycles.
If the animation-direction value is "alternate", the animation played as normal every odd time (1,3,5,etc...) and backwards every even time (2,3,6,etc...).
Note: If the animation is set to play only once, this property will have no effect.
Syntax of this property:
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit ;
Property Values:
normal - it specifies that the animation should be played as normal. (default)
reverse - it specifies that the animation should be played in reverse direction.
alternate - it specifies that the animation should be played in normal direction on odd cycles, and reverse direction on even cycles.
alternate-reverse - it specifies that the animation should be played in reverse direction on odd cycles, and normal direction on even cycles.
initial - it specifies that the value of the property should be set to the default value.
inherit - it specifies that the value of the property should be inherited from the parent element.
Example
In this example, it shows two animations with different directions:
CSS3 animation-direction
normal
alternate
This is the result of the code above:
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Add new comment
- 41 views