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

桌面浏览器在webkit中可以看到效果，移动设备上iOS和Android基本上都可以运行。

创建动画用@keyframes规则，后跟所选择的名称，该名称用于动画的标识符。然后指定关键帧。

@-webkit-keyframes testAnimation1 {

   0%{opacity:0;}

   50%{opacity:0.8;}

   100%{opacity:1.0;}

}

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

@-webkit-keyframes testAnimation2 {

   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 ease infinite;

}

这样就可以调用前面声明的关键帧动画了。