css3 animation

css3 动画属性

by weiming le

HTML

<button class="btn">mybutton</button>
<ul>
    <li><strong>animation-direction</strong>:动画播放方向，包括normal（只有顺序播放状态）和alternate（顺逆播放状态）</li>
    <li><strong>animation-interation-count</strong>:动画播放次数</li>
</ul>

CSS

*{ margin:0;padding:0; }
body { margin:20px; }
.btn {  height:30px; padding:0 10px; border-radius:3px; border:1px solid #eee; cursor:pointer; -webkit-animation-name:'mybuttonAnimate'; -webkit-animation-duration:10s; -webkit-animation-direction:alternate;  -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in; /*-webkit-animation-play-state:pause;*/ }
@-webkit-keyframes mybuttonAnimate {
	0% {
		background:rgba(192,192,192,0.1);
	    color:#666; 
		/*font-size:14px; */
	}
	25%{
		background:rgba(128,0,0,0.5);
		color:#fff;
		/*font-size:16px; */
	}
	50%{
		background:rgba(128,128,0,0.3);
		color:#fff;
		/*font-size:18px; */
	}

	100%{
		background:#004040;
		color:#fff;
		/*font-size:22px;*/ 
	}
}