1. CSS Tutorial
  2. CSS @keyframes Rule

CSS @keyframes Rule

Submitted by alpha_luna on Tuesday, June 21, 2016 - 16:34.
Language
HTML/CSS
What is a @keyframes in CSS3? The @keyframes rule is used to create animations. In general, an animation in CSS3 is defined as changing from one CSS style to another. Structure: @keyframes name { selector { styles ; } } Property Values: name – it’s specifies the name of the animation. (required) selector – it’s specifies that percentage of the animation duration.(required) Possible Value: 0 – 100% from (same as 0%) to (same as 100%) styles - it’s specifies one or more CSS style properties.(required) Example: In this example you can see on how to use @keyframes rule to animate the position of a box.

CSS Source Code

  1. <style type="text/css">
  2.  
  3. div.animate {
  4.   width: 50px;
  5.   height: 50px;
  6.   color: white;
  7.   padding: 2px;
  8.   background: blue;
  9.   position: relative;
  10. }
  11.  
  12. #test1 {
  13.   animation-name: boxmove;
  14.   animation-duration: 5s;
  15.   animation-iteration-count: infinite;
  16.   /* Firefox */
  17.   -moz-animation-name: boxmove;
  18.   -moz-animation-duration: 5s;
  19.   -moz-animation-iteration-count: infinite;
  20.   /* Safari and Google Chrome */
  21.   -webkit-animation-name: boxmove;
  22.   -webkit-animation-duration: 5s;
  23.   -webkit-animation-iteration-count: infinite;
  24. }
  25.  
  26. @keyframes boxmove
  27. {
  28.   from {left: 0px;}
  29.   to {left: 210px;}
  30. }
  31.  
  32. @-moz-keyframes boxmove /* Firefox */
  33. {
  34.   from {left: 0px;}
  35.   to {left: 210px;}
  36. }
  37.  
  38. @-webkit-keyframes boxmove /* Safari and Google Chrome */
  39. {
  40.   from {left: 0px;}
  41.   to {left: 210px;}
  42. }
  43.  
  44. </style>

Full Source Code

  1. <!DOCTYPE html>
  3.  
  5.  
  6. <style type="text/css">
  7.  
  8. div.animate {
  9.   width: 50px;
  10.   height: 50px;
  11.   color: white;
  12.   padding: 2px;
  13.   background: blue;
  14.   position: relative;
  15. }
  16.  
  17. #test1 {
  18.   animation-name: boxmove;
  19.   animation-duration: 5s;
  20.   animation-iteration-count: infinite;
  21.   /* Firefox */
  22.   -moz-animation-name: boxmove;
  23.   -moz-animation-duration: 5s;
  24.   -moz-animation-iteration-count: infinite;
  25.   /* Safari and Google Chrome */
  26.   -webkit-animation-name: boxmove;
  27.   -webkit-animation-duration: 5s;
  28.   -webkit-animation-iteration-count: infinite;
  29. }
  30.  
  31. @keyframes boxmove
  32. {
  33.   from {left: 0px;}
  34.   to {left: 210px;}
  35. }
  36.  
  37. @-moz-keyframes boxmove /* Firefox */
  38. {
  39.   from {left: 0px;}
  40.   to {left: 210px;}
  41. }
  42.  
  43. @-webkit-keyframes boxmove /* Safari and Google Chrome */
  44. {
  45.   from {left: 0px;}
  46.   to {left: 210px;}
  47. }
  48.  
  50.  
  51. </head>
  52.  
  54.  
  55. <div id="test1" class="animate">linear</div>
  56.  
  57. </body>
  58.  
  59. </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
@keyframes
Name
Selector
Styles

Add new comment

About text formats
  • 164 views