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.

 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;}
 }

  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.