In CSS3 animations we can easily create basic animation without using any flash or JavaScript.
Like an element moving from one position to another with effects.
@keyframes Rule
While creating animation we required @keyframes.
We need to add CSS style to @keyframes rule so that animation will work from one style to another.
Animation property
Animation created in @keyframes rule. also need to bind it to selector.
For binding selector need to specify 2 properties.
- Name of the animation
- Duration of the animation
See css code below.
div {
-webkit-animation: testanimate 10s; /* Chrome, Safari, Opera */
animation: testanimate 10s;
}
@keyframes testanimate { /* Standard syntax */
from {background: #1FA67A;}
to {background: #000000;}
}
@-webkit-keyframes testanimate { /* For Chrome, Safari, Opera */
from {background: #1FA67A;}
to {background: #000000;}
}We can also change style based on the percent of the animation completed (ex: at 25%, at 55%, etc.).
See below example changing animation based on percentage.
@keyframes testanimate { /* Standard syntax */
0% {background: green;}
35% {background: blue;}
55% {background: red;}
95% {background: yellow;}
}
@-webkit-keyframes testanimate { /* For Chrome, Safari, Opera */
0% {background: green;}
35% {background: blue;}
55% {background: red;}
95% {background: yellow;}
}Animation with its properties
CSS3 Animations properties are animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-play-state.
div {
/* Standard syntax */
animation-name: testanimate;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* For Chrome, Safari, Opera */
-webkit-animation-name: testanimate;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}Full HTML & CSS Code
<!DOCTYPE html>
<html>
<head>
<style>
div.animate {
-webkit-animation: testanimate 10s; /* Chrome, Safari, Opera */
animation: testanimate 10s;
}
@keyframes testanimate { /* Standard syntax */
from {background: #1FA67A;}
to {background: #000000;}
}
@-webkit-keyframes testanimate { /* For Chrome, Safari, Opera */
from {background: #1FA67A;}
to {background: #000000;}
}
</style>
</head>
<body>
<div class="animate"></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>Note: This example does not work in Internet Explorer 9 and earlier versions.
