@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.
<style type="text/css"> div.animate { width: 50px; height: 50px; color: white; padding: 2px; background: blue; position: relative; } #test1 { animation-name: boxmove; animation-duration: 5s; animation-iteration-count: infinite; /* Firefox */ -moz-animation-name: boxmove; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; /* Safari and Google Chrome */ -webkit-animation-name: boxmove; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; } @keyframes boxmove { from {left: 0px;} to {left: 210px;} } @-moz-keyframes boxmove /* Firefox */ { from {left: 0px;} to {left: 210px;} } @-webkit-keyframes boxmove /* Safari and Google Chrome */ { from {left: 0px;} to {left: 210px;} } </style>
<!DOCTYPE html> <html> <head> <style type="text/css"> div.animate { width: 50px; height: 50px; color: white; padding: 2px; background: blue; position: relative; } #test1 { animation-name: boxmove; animation-duration: 5s; animation-iteration-count: infinite; /* Firefox */ -moz-animation-name: boxmove; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; /* Safari and Google Chrome */ -webkit-animation-name: boxmove; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; } @keyframes boxmove { from {left: 0px;} to {left: 210px;} } @-moz-keyframes boxmove /* Firefox */ { from {left: 0px;} to {left: 210px;} } @-webkit-keyframes boxmove /* Safari and Google Chrome */ { from {left: 0px;} to {left: 210px;} } </style> </head> <body> </body> </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.