Animations
With css you can animation of HTML elements without using JavaScript.
For define an animation in css you should use this syntax.
@keyframes animationName {
from {css properties}
to {css properties}
}
div {
width: 300px;
height: 200px;
background-color: blue;
animation-name: animationName;
animation-duration: 2s;
}
//Example 1:
@keyframes mytest {
from { background-color: yellow; }
to { background-color: green; }
}
div {
width: 300px;
height: 200px;
background-color: blue;
animation-name: mytest;
animation-duration: 2s;
}
//Example 2:
@keyframes mytest2 {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
}
div {
width: 300px;
height: 200px;
background-color: blue;
animation-name: mytest2;
animation-duration: 2s;
}
Example 3:
div {
width: 120px;
height: 50px;
background-color: green;
position: relative;
animation-name: mytest3;
animation-duration: 3s;
animation-delay: 2s;
}
@keyframes mytest3 {
0% {background-color:#ff4499; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:#cc99ff; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}