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:
<style type="text/css"> div.box1 { width:50px; height:50px; background:blue; position:relative; animation:boxmove 5s ease 0s infinite normal; /* Firefox */ -moz-animation:boxmove 5s ease 0s infinite normal; /* Safari and Google Chrome */ -webkit-animation:boxmove 5s ease 0s infinite normal; } div.box2 { width:50px; height:50px; background:red; position:relative; animation:boxmove 5s ease 2s infinite normal; /* Firefox */ -moz-animation:boxmove 5s ease 2s infinite normal; /* Safari and Google Chrome */ -webkit-animation:boxmove 5s ease 2s infinite normal; } div.box3 { width:50px; height:50px; background:green; position:relative; animation:boxmove 5s ease -2s infinite normal; /* Firefox */ -moz-animation:boxmove 5s ease -2s infinite normal; /* Safari and Google Chrome */ -webkit-animation:boxmove 5s ease -2s infinite normal; } @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.box1 { width:50px; height:50px; background:blue; position:relative; animation:boxmove 5s ease 0s infinite normal; /* Firefox */ -moz-animation:boxmove 5s ease 0s infinite normal; /* Safari and Google Chrome */ -webkit-animation:boxmove 5s ease 0s infinite normal; } div.box2 { width:50px; height:50px; background:red; position:relative; animation:boxmove 5s ease 2s infinite normal; /* Firefox */ -moz-animation:boxmove 5s ease 2s infinite normal; /* Safari and Google Chrome */ -webkit-animation:boxmove 5s ease 2s infinite normal; } div.box3 { width:50px; height:50px; background:green; position:relative; animation:boxmove 5s ease -2s infinite normal; /* Firefox */ -moz-animation:boxmove 5s ease -2s infinite normal; /* Safari and Google Chrome */ -webkit-animation:boxmove 5s ease -2s infinite normal; } @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> <br/> <br/> </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.