@-webkit-keyframes greenPulse {

from { background-color: #A2D603; -webkit-box-shadow: 0 0 9px #333; }

50% { background-color: #96C50A; -webkit-box-shadow: 0 0 18px #91bd09; }

to { background-color: #A2D603; -webkit-box-shadow: 0 0 9px #333; }

}

在上面的规则中：


@-webkit-keyframes：告知浏览器我们定义的是以关键帧为基础的动画；

greenPulse：动画的名字，这样可以附加到相应的对象之上；

from：定义动画的初始帧；

50%：意味着在动画的中间发生改变；

to：定义动画的尾帧；注意：动画总是回到初始帧，不可能在最后一帧停止。这也意味着一个平滑的动画在开始和结束拥有相同的属性。


然后，将定义的动画添加到相应的对象，如：

   .button1 {

   padding-top:3px;

   border:1px solid #FFFFFF;

   color:#FFFFFF;

   font-size:14px;

   background-color: #96C50A;

   -webkit-animation-name: greenPulse;

   -webkit-animation-duration: 2s;

   -webkit-animation-iteration-count: infinite;

   }

出现的样式是这样的