CSS3动画

关键帧： CSS3动画通过关键帧控制动画的每一步。

桌面浏览器在webkit中可以看到效果，移动设备上iOS和Android基本上都可以运行。
创建动画用@keyframes规则，后跟所选择的名称，该名称用于动画的标识符。然后指定关键帧。

@-webkit-keyframes testAnimation1{
   0%{opacity:0;}
   50%{opacity:0.8;}
   100%{opacity:1.0;}
}

每个关键帧就像自己嵌套的CSS声明块。也可使用from和to来指定帧的内容。

@-webkit-keyframestestAnimation2{
   0%,100%{opacity:0;}
   20%,80%{opacity:0.8;}
}

上面的代码表示元素最初不可见，渐渐淡入到20%时为可见，然后持续可见到80%，最后淡出。

动画属性：

包括

animation-name:"testAnimation1";

animation-duration：1s;

animation-timing-function：ease;

animation-interation-count:infinite;

animation-direction:alternate;

animation-delay:1s;

aniamtion-fill-mode、animation-play-state

可以简写

.mycss{

   -webkit-animation:" testAnimation1 " 1s easeinfinite;

}

这样就可以调用前面声明的关键帧动画了。前面有一篇CSS3制作发光边框的例子可以作为参考。