CSS3 13 - CSS3 Animations | Keyframes in CSS | CSS animation using keyframes | Animation without JS
CSS3 Animations
CSS allows us to do animation without using JavaScript.
Specify some Keyframes for the animation.
As many times you want can change a CSS properties.
Animation needs to be defined with the @keyframes at rule which is then called with the animation property.
Animation Properties :
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
Keyframes Syntax :-
@keyframes name
{
fromvalue{property: value;}
tovalue {property: value;}
}
Keyframes example :
@keyframes example
{
0%{background-color: red;}
20%{background-color: blue;}
60%{background-color: tan;}
100%{background-color: pink;}
}
Animations for Cross Browser
@-moz-keyframes example{background-color: red;} //Mozilla Browser
@-webkit-keyframes example{background-color: red;} //Chrome Browser
@-o-keyframes example{background-color: red;} // Opera Browser