Loading

CSS @keyframes Rule

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

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