1. CSS Tutorial
  2. CSS Animation Properties

CSS Animation Properties

Submitted by alpha_luna on Monday, June 20, 2016 - 17:30.
Language
HTML/CSS
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>
  3.  
  4. <title>Using animation in CSS3</title>
  5.  
  7.  
  8. <style type="text/css">
  9.  
  10. div.box1
  11. {
  12.   width:50px;
  13.   height:50px;
  14.   background:blue;
  15.   position:relative;
  16.   animation:boxmove 5s ease 0s infinite normal;
  17.   /* Firefox */
  18.   -moz-animation:boxmove 5s ease 0s infinite normal;
  19.   /* Safari and Google Chrome */
  20.   -webkit-animation:boxmove 5s ease 0s infinite normal;
  21. }
  22.  
  23. div.box2
  24. {
  25.   width:50px;
  26.   height:50px;
  27.   background:red;
  28.   position:relative;
  29.   animation:boxmove 5s ease 2s infinite normal;
  30.   /* Firefox */
  31.   -moz-animation:boxmove 5s ease 2s infinite normal;
  32.   /* Safari and Google Chrome */
  33.   -webkit-animation:boxmove 5s ease 2s infinite normal;
  34. }
  35.  
  36. div.box3
  37. {
  38.   width:50px;
  39.   height:50px;
  40.   background:green;
  41.   position:relative;
  42.   animation:boxmove 5s ease -2s infinite normal;
  43.   /* Firefox */
  44.   -moz-animation:boxmove 5s ease -2s infinite normal;
  45.   /* Safari and Google Chrome */
  46.   -webkit-animation:boxmove 5s ease -2s infinite normal;
  47. }
  48.  
  49. @keyframes boxmove
  50. {
  51.   from {left:0px;}
  52.   to {left:210px;}
  53. }
  54.  
  55. @-moz-keyframes boxmove /* Firefox */
  56. {
  57.   from {left:0px;}
  58.   to {left:210px;}
  59. }
  60.  
  61. @-webkit-keyframes boxmove /* Safari and Google Chrome */
  62. {
  63.   from {left:0px;}
  64.   to {left:210px;}
  65. }
  67.  
  68. </head>
  69.  
  71.  
  72. <div class="box1"></div>
  73. <br/>
  74. <div class="box2"></div>
  75. <br/>
  76. <div class="box3"></div>
  77.  
  78. </body>
  79.  
  80. </html>
This is the result of the code 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
animation
Moving

Add new comment

About text formats
  • 222 views