Animation Duration in CSS

[deniz777]

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:

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.

Download