CSS3 animation
By placing the animation on the web site, it attracts the user's eye.
Until now what you used to use the Flash, now also allows construction of only the CSS is now.
CSS animation lightly the capacity than the Flash, you can further implanted only in the implementation of the code.
It is a simple animation to change the square of the element to the circular.
div#animation{
width:60px;
height:60px;
background:#F1F1F1;
-moz-animation: anima1 3s ease 0s infinite;
-webkit-animation: anima1 3s ease 0s infinite;
-o-animation: anima1 3s ease 0s infinite;
-ms-animation: anima1 3s ease 0s infinite;
}
@-moz-keyframes anima1 {
0% { }
50% { border-radius:100px;} 100% { border-radius:0px;}
}
@-webkit-keyframes anima1 {
0% { }
50% { border-radius:100px;} 100% { border-radius:0px;}
}
@-o-keyframes anima1 {
0% { }
50% { border-radius:100px;} 100% { border-radius:0px;}
}
@-ms-keyframes anima1 {
0% { }
50% { border-radius:100px;} 100% { border-radius:0px;}
}
The animation can be specified in many of the properties.
div#animation{
width:100px;
height:100px;
background:#F1F1F1;
-moz-animation: anima2 7s ease 0s infinite;
-webkit-animation: anima2 7s ease 0s infinite;
-o-animation: anima2 7s ease 0s infinite;
-ms-animation: anima2 7s ease 0s infinite;
}
@-moz-keyframes anima2 {
0% { }
50% {
transform:rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
background:rgba(255,255,255,0.5);
margin-left:70%;
}
100% {
transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
background:#F1F1F1;
margin-left:0%;
}
}
@-webkit-keyframes anima2 {
0% { }
50% {
transform:rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
background:rgba(255,255,255,0.5);
margin-left:70%;
}
100% {
transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
background:#F1F1F1;
margin-left:0%;
}
}
@-o-keyframes anima2 {
0% { }
50% {
transform:rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
background:rgba(255,255,255,0.5);
margin-left:70%;
}
100% {
transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
background:#F1F1F1;
margin-left:0%;
}
}
@-ms-keyframes anima2 {
0% { }
50% {
transform:rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
background:rgba(255,255,255,0.5);
margin-left:70%;
}
100% {
transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
background:#F1F1F1;
margin-left:0%;
}
}
Although it may be a little complicated description, within you are writing and become familiar code, you can see going is drawn animation to the head.
But will again need a vendor prefix, because you might come out is an easier description method future, please try us.
[reference]CSS Reference