CSS3 animation

CSS3 animation

Control the attention with the 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.

From square to round

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;}
 }
Sample of animation

Various animation specified

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%;
         }
 }
Sample of animation

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.

CSS of Innovation

Consultant using the CSS on the front , strengthen the power of expression.

Check

CSS Contents