Loading

CSS Animation Properties

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

What is animation in CSS3?
The animation property is a shorthand property that allows to setting six of the animation properties at once.

It has a following syntax:

animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | initial | inherit ;

Property Values:
name - it’s specifies the name of the keyframe you want to bind to the selector.

duration - it’s specifies the duration in seconds or milliseconds of the animation.

timing-function - it’s specifies the duration in seconds or milliseconds of the animation.

delay - it’s specifies a delay before the animation will start.

iteration-count - it’s specifies the number of times to play the animation.

direction - it’s specifies whether or not the animation should play in reverse on alternate cycles.

fill-mode - it’s specifies what values are applied by the animation outside the time it is executing.

play-state - it’s specifies whether the animation is running or paused.

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 you can see on how to use an animation moving in three different colored boxes from left to right using the animation shortcut:

The CSS code.

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

Full Source Code

  1. <!DOCTYPE html>
  2.  
  3. <title>Using animation in CSS3</title>
  4.  
  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 ease 0s infinite normal;
  15. /* Firefox */
  16. -moz-animation:boxmove 5s ease 0s infinite normal;
  17. /* Safari and Google Chrome */
  18. -webkit-animation:boxmove 5s ease 0s infinite normal;
  19. }
  20.  
  21. div.box2
  22. {
  23. width:50px;
  24. height:50px;
  25. background:red;
  26. position:relative;
  27. animation:boxmove 5s ease 2s infinite normal;
  28. /* Firefox */
  29. -moz-animation:boxmove 5s ease 2s infinite normal;
  30. /* Safari and Google Chrome */
  31. -webkit-animation:boxmove 5s ease 2s infinite normal;
  32. }
  33.  
  34. div.box3
  35. {
  36. width:50px;
  37. height:50px;
  38. background:green;
  39. position:relative;
  40. animation:boxmove 5s ease -2s infinite normal;
  41. /* Firefox */
  42. -moz-animation:boxmove 5s ease -2s infinite normal;
  43. /* Safari and Google Chrome */
  44. -webkit-animation:boxmove 5s ease -2s infinite normal;
  45. }
  46.  
  47. @keyframes boxmove
  48. {
  49. from {left:0px;}
  50. to {left:210px;}
  51. }
  52.  
  53. @-moz-keyframes boxmove /* Firefox */
  54. {
  55. from {left:0px;}
  56. to {left:210px;}
  57. }
  58.  
  59. @-webkit-keyframes boxmove /* Safari and Google Chrome */
  60. {
  61. from {left:0px;}
  62. to {left:210px;}
  63. }
  64.  
  65. </head>
  66.  
  67.  
  68. <div class="box1"></div>
  69. <br/>
  70. <div class="box2"></div>
  71. <br/>
  72. <div class="box3"></div>
  73.  
  74. </body>
  75.  
  76. </html>

This is the result of the code 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.

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>
  • 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.