Animation Delay Property in CSS3

Language

Let's discuss, what is a animation-delay in CSS3. The animation-delay property specifies when the animation should start. The animation-delay value can be defined in seconds (s) or milliseconds (ms). Syntax of this property: animation-delay: time | initial | inherit ; Property Values: time - it specifies the time (can be a negative number) before the animation begins. This is a time difference from when the animation is applied to the element. The time may be specified in either seconds (by specifying "s" as the unit) or milliseconds (by specifying "ms" as the unit). If no units are specified, seconds are assumed. (optional) The Defaultvalue is 0. 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: I have here an example animation using time difference of 0 seconds, 2 seconds and -2 seconds. See for yourself the difference.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>CSS3 animation-delay</title>
  5.  
  6. <style type="text/css">
  7.  
  8. div.box1
  9. {
  10. width:50px;
  11. height:50px;
  12. background:blue;
  13. position:relative;
  14. animation:boxmove 5s infinite;
  15. animation-delay:0;
  16. /* Firefox */
  17. -moz-animation:boxmove 5s infinite;
  18. -moz-animation-delay:0;
  19. /* Safari and Google Chrome */
  20. -webkit-animation:boxmove 5s infinite;
  21. -webkit-animation-delay:0;
  22. }
  23.  
  24. div.box2
  25. {
  26. width:50px;
  27. height:50px;
  28. background:red;
  29. position:relative;
  30. animation:boxmove 5s infinite;
  31. animation-delay:2s;
  32. /* Firefox */
  33. -moz-animation:boxmove 5s infinite;
  34. -moz-animation-delay:2s;
  35. /* Safari and Google Chrome */
  36. -webkit-animation:boxmove 5s infinite;
  37. -webkit-animation-delay:2s;
  38. }
  39.  
  40. div.box3
  41. {
  42. width:50px;
  43. height:50px;
  44. background:green;
  45. position:relative;
  46. animation:boxmove 5s infinite;
  47. animation-delay:-2s;
  48. /* Firefox */
  49. -moz-animation:boxmove 5s infinite;
  50. -moz-animation-delay:-2s;
  51. /* Safari and Google Chrome */
  52. -webkit-animation:boxmove 5s infinite;
  53. -webkit-animation-delay:-2s;
  54. }
  55.  
  56. @keyframes boxmove
  57. {
  58. from {left:0px;}
  59. to {left:210px;}
  60. }
  61.  
  62. @-moz-keyframes boxmove /* Firefox */
  63. {
  64. from {left:0px;}
  65. to {left:210px;}
  66. }
  67.  
  68. @-webkit-keyframes boxmove /* Safari and Google Chrome */
  69. {
  70. from {left:0px;}
  71. to {left:210px;}
  72. }
  73. </style>
  74.  
  75. </head>
  76. <body>
  77.  
  78. <div class="box1">delay 0s</div>
  79. <br/>
  80. <div class="box2">delay 2s</div>
  81. <br/>
  82. <div class="box3">delay -2s</div>
  83.  
  84. </body>
  85. </html>

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