Animation Duration in CSS

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

In this tutorial, we are going to learn about animation-duration.

So, what is animation-duration?

The animation-duration property specifies how many seconds or milliseconds an animation takes to complete one cycle.

This property has a syntax:

animation-duration: time | initial | inherit ;

Property Values

time - it specifies the length of time an animation takes to finish. The default value is equal to 0s.

initial - it specifies that the value of the property should be set to the default value.

style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-3664195971165750"
data-ad-slot="8323940646">

inherit - it specifies that the value of the property should be inherited from the parent element.

Example

This example shows the use of the animation-duration property in a three (3) different value of time.

CSS Source Code

  1. <style type="text/css">
  2.  
  3. div.animation {
  4. width:60px;
  5. height:50px;
  6. color:white;
  7. padding:2px;
  8. background:blue;
  9. position:relative;
  10. }
  11.  
  12. div.animation1 {
  13. width:60px;
  14. height:50px;
  15. color:white;
  16. padding:2px;
  17. background:red;
  18. position:relative;
  19. }
  20.  
  21. div.animation2 {
  22. width:60px;
  23. height:50px;
  24. color:white;
  25. padding:2px;
  26. background:green;
  27. position:relative;
  28. }
  29.  
  30. #test1 {
  31. animation-name:boxmove;
  32. animation-duration:5s;
  33. animation-iteration-count:infinite;
  34. /* Firefox */
  35. -moz-animation-name:boxmove;
  36. -moz-animation-duration:5s;
  37. -moz-animation-iteration-count:infinite;
  38. /* Safari and Google Chrome */
  39. -webkit-animation-name:boxmove;
  40. -webkit-animation-duration:5s;
  41. -webkit-animation-iteration-count:infinite;
  42. }
  43.  
  44. #test2 {
  45. animation-name:boxmove;
  46. animation-duration:10s;
  47. animation-iteration-count:infinite;
  48. /* Firefox */
  49. -moz-animation-name:boxmove;
  50. -moz-animation-duration:10s;
  51. -moz-animation-iteration-count:infinite;
  52. /* Safari and Google Chrome */
  53. -webkit-animation-name:boxmove;
  54. -webkit-animation-duration:10s;
  55. -webkit-animation-iteration-count:infinite;
  56. }
  57.  
  58. #test3 {
  59. animation-name:boxmove;
  60. animation-duration:15s;
  61. animation-iteration-count:infinite;
  62. /* Firefox */
  63. -moz-animation-name:boxmove;
  64. -moz-animation-duration:15s;
  65. -moz-animation-iteration-count:infinite;
  66. /* Safari and Google Chrome */
  67. -webkit-animation-name:boxmove;
  68. -webkit-animation-duration:15s;
  69. -webkit-animation-iteration-count:infinite;
  70. }
  71.  
  72. @keyframes boxmove
  73. {
  74. from {left:0px;}
  75. to {left:210px;}
  76. }
  77.  
  78. @-moz-keyframes boxmove /* Firefox */
  79. {
  80. from {left:0px;}
  81. to {left:210px;}
  82. }
  83.  
  84. @-webkit-keyframes boxmove /* Safari and Google Chrome */
  85. {
  86. from {left:0px;}
  87. to {left:210px;}
  88. }
  89.  
  90. </style>

The complete code.

  1. <!DOCTYPE html>
  2. <title>CSS3 animation-duration</title>
  3.  
  4. <style type="text/css">
  5.  
  6. div.animation {
  7. width:60px;
  8. height:50px;
  9. color:white;
  10. padding:2px;
  11. background:blue;
  12. position:relative;
  13. }
  14.  
  15. div.animation1 {
  16. width:60px;
  17. height:50px;
  18. color:white;
  19. padding:2px;
  20. background:red;
  21. position:relative;
  22. }
  23.  
  24. div.animation2 {
  25. width:60px;
  26. height:50px;
  27. color:white;
  28. padding:2px;
  29. background:green;
  30. position:relative;
  31. }
  32.  
  33. #test1 {
  34. animation-name:boxmove;
  35. animation-duration:5s;
  36. animation-iteration-count:infinite;
  37. /* Firefox */
  38. -moz-animation-name:boxmove;
  39. -moz-animation-duration:5s;
  40. -moz-animation-iteration-count:infinite;
  41. /* Safari and Google Chrome */
  42. -webkit-animation-name:boxmove;
  43. -webkit-animation-duration:5s;
  44. -webkit-animation-iteration-count:infinite;
  45. }
  46.  
  47. #test2 {
  48. animation-name:boxmove;
  49. animation-duration:10s;
  50. animation-iteration-count:infinite;
  51. /* Firefox */
  52. -moz-animation-name:boxmove;
  53. -moz-animation-duration:10s;
  54. -moz-animation-iteration-count:infinite;
  55. /* Safari and Google Chrome */
  56. -webkit-animation-name:boxmove;
  57. -webkit-animation-duration:10s;
  58. -webkit-animation-iteration-count:infinite;
  59. }
  60.  
  61. #test3 {
  62. animation-name:boxmove;
  63. animation-duration:15s;
  64. animation-iteration-count:infinite;
  65. /* Firefox */
  66. -moz-animation-name:boxmove;
  67. -moz-animation-duration:15s;
  68. -moz-animation-iteration-count:infinite;
  69. /* Safari and Google Chrome */
  70. -webkit-animation-name:boxmove;
  71. -webkit-animation-duration:15s;
  72. -webkit-animation-iteration-count:infinite;
  73. }
  74.  
  75. @keyframes boxmove
  76. {
  77. from {left:0px;}
  78. to {left:210px;}
  79. }
  80.  
  81. @-moz-keyframes boxmove /* Firefox */
  82. {
  83. from {left:0px;}
  84. to {left:210px;}
  85. }
  86.  
  87. @-webkit-keyframes boxmove /* Safari and Google Chrome */
  88. {
  89. from {left:0px;}
  90. to {left:210px;}
  91. }
  92.  
  93.  
  94. </head>
  95.  
  96. <div id="test1" class="animation">5s duration</div>
  97. <br />
  98. <div id="test2" class="animation1">10s duration</div>
  99. <br />
  100. <div id="test3" class="animation2">15s duration</div>
  101.  
  102. </body>
  103. </html>

This is the result of the codes above:

result

Hope that this tutorial will help you a lot.

So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.


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.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3>
  • You may insert videos with [video:URL]
  • 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.