Chrome under the effect of ideal, FIREFOX,IE9 no animation effect.
CSS code fragment
. button,. button:visited{
Background: #222 URL (overlay.png) repeat-x;
Display:inline-block;
padding:5px 10px 6px;
Color: #fff;
Text-decoration:none;
/*border-radius*/
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
/*box-shadow*/
-webkit-box-shadow:0 1px 3px Rgba (0,0,0,0.6);
-moz-box-shadow:0 1px 3px Rgba (0,0,0,0.6);
box-shadow:0 1px 3px Rgba (0,0,0,0.6);
text-shadow:0 -1px 1px rgba (0,0,0,0.25);
border-bottom:1px solid Rgba (0,0,0,0.25);
position:relative;
Cursor:pointer;
}
. button:hover{
Background-color: #111;
Color: #fff;
/*animation-duration*/
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
Animation-duration:2s;
/*animation-timing-function*/
-webkit-animation-timing-function:ease-out;
-moz-animation-timing-function:ease-out;
-ms-animation-timing-function:ease-out;
-o-animation-timing-function:ease-out;
Animation-timing-function:ease-out;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
Animation-iteration-count:infinite;
}
/* Define Animation/*
@-webkit-keyframes greenpulse{
From {background-color: #91bd09;
/*box-shadow*/
-webkit-box-shadow:0 0 9px #333;
-moz-box-shadow:0 0 9px #333;
box-shadow:0 0 9px #333;
}
50%{
Background-color: #B4E02C;
/*box-shadow*/
-webkit-box-shadow:0 0 18px #91bd09;
-moz-box-shadow:0 0 18px #91bd09;
box-shadow:0 0 18px #91bd09;
}
to{
Background-color: #91bd09;
/*box-shadow*/
-webkit-box-shadow:0 0 9px #333;
-moz-box-shadow:0 0 9px #333;
box-shadow:0 0 9px #333;
}
}
. Green.button,. green.button:visited{
Background-color: #91bd09;
}
. green.button:hover{
/*animation-name*/
-webkit-animation-name:greenpulse;
-moz-animation-name:greenpulse;
-ms-animation-name:greenpulse;
-o-animation-name:greenpulse;
Animation-name:greenpulse;
}
HTML code Fragment
<ul>
<li>
<a class= "button Magenta Super" href= "#" > button </a>
<a class= "button Green Super" href= "#" > button </a>
<a class= "button Red Super" href= "#" > button </a>
<a class= "button Orange Super" href= "#" > button </a>
<a class= "button Blue Super" href= "#" > button </a>
<a class= "button Yellow Super" href= "#" > button </a>
</li>
<li>
<input type= "button" class= "button Magenta Super" value= "button"/>
<input type= "button" class= "buttons Green Super" value= "Pushbutton"/>
<input type= "button" class= "button Red Super" value= "button"/>
<input type= "button" class= "button Orange Super" value= "buttons"/> This article link http://www.cxybl.com/html/wyzz/CSS/20130614/ 38595.html
