Animation Direction in CSS3

Submitted by: 
Language: 
Visitors have accessed this post 314 times.

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:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>CSS3 animation-direction</title>
  5.  
  6. <style type="text/css">
  7. div.normal
  8. {
  9. width:55px;
  10. height:50px;
  11. background:blue;
  12. position:relative;
  13. animation:boxmove 5s infinite;
  14. animation-direction:normal;
  15. /* Firefox */
  16. -moz-animation:boxmove 5s infinite;
  17. -moz-animation-direction:normal;
  18. /* Safari and Google Chrome */
  19. -webkit-animation:boxmove 5s infinite;
  20. -webkit-animation-direction:normal;
  21. }
  22.  
  23. div.alternate
  24. {
  25. width:55px;
  26. height:50px;
  27. background:green;
  28. position:relative;
  29. animation:boxmove 5s infinite;
  30. animation-direction:alternate;
  31. /* Firefox */
  32. -moz-animation:boxmove 5s infinite;
  33. -moz-animation-direction:alternate;
  34. /* Safari and Google Chrome */
  35. -webkit-animation:boxmove 5s infinite;
  36. -webkit-animation-direction:alternate;
  37. }
  38.  
  39. @keyframes boxmove
  40. {
  41. from {left:0px;}
  42. to {left:210px;}
  43. }
  44.  
  45. @-moz-keyframes boxmove /* Firefox */
  46. {
  47. from {left:0px;}
  48. to {left:210px;}
  49. }
  50.  
  51. @-webkit-keyframes boxmove /* Safari and Google Chrome */
  52. {
  53. from {left:0px;}
  54. to {left:210px;}
  55. }
  56. </style>
  57.  
  58. </head>
  59. <body>
  60.  
  61. <div class="normal">normal</div>
  62. <br/>
  63. <div class="alternate">alternate</div>
  64. </div>
  65.  
  66. </body>
  67. </html>

This is the result of the code above:

result


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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.