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

Author: Chris Bax

Public: www.netbax.net