<div id="netbax-animated"></div>

.netbax-animated {
 width:60px;
 height:40px;
 background:red;
 color:#ffffff;
 position:absolute;
 font-weight:bold;
 font-size:15px;
 padding:10px;
float:left;
margin:5px;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:1s,1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
border-radius:5px;
opacity:0.4;
}
.netbax-animated :hover
{
opacity:1;
background:#1ec7e6;
width:130px;
height:80px;
font-size:35px;
}

#netbax-animated  {
width:70px;
height:47px;
background: red;
color: #ffffff;
position: relative;
font-weight:bold;
font-size:20px;
padding:10px;
animation:netbax-animated  5s 1;
-moz-animation:netbax-animated  5s 1;
-webkit-animation:netbax-animated  5s 1;
-o-animation:netbax-animated  5s 1;
border-radius:5px;
-webkit-border-radius:5px;
}

@keyframes netbax-animated 
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes netbax-animated 
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(0deg);left:500px;}
70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes netbax-animated 
{
0%  {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(20deg);left:0px;}
50%  {-moz-transform: rotate(0deg);left:500px;}
55%  {-moz-transform: rotate(0deg);left:500px;}
70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes netbax-animated 
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50%  {transform: rotate(0deg);left:500px;}
55%  {transform: rotate(0deg);left:500px;}
70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

<iframe src="https://www.netbax.net/tab/css/css-animations-property.html" style="width: 550px; height:550px;" frameborder="0"></iframe>