Animation Duration in CSS

Submitted by alpha_luna on Wednesday, June 22, 2016 - 17:31.

Language

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

Tags

Add new comment

About text formats
  • 341 views