Animate动画现在越来越流行，并且对于触屏设备支持良好，特别是对于webkit内核的浏览器支持特别良好。webkit浏览器诸如chrome以及Safari，因此在Android及IOS设备上运行效果是杠杠的。Animate正如flash一样，都是通过帧来控制动画的，如果你之前学习过flash或者使用过adobe flash软件，你就能够明白帧是什么意思了。
一、Animate动画初识
1、浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-
2、代码分析
首先我们来看一段Animate的动画代码
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
}
分析以上代码
首先如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
0%,25%,%50,%75,%100,这几个就是所谓的帧动画效果，意思就是当前状态在0%,25%,%50,%75,%100的时候所需要显示的CSS动画效果。
上面的代码中opacity代表透明度，1即100%，而@-webkit-keyframes以及@keyframes都是一样的，主要是为了浏览器兼容而增加了一个webkit前缀，让webkit浏览器能够识别此代码。
animation-name: flash，此意思是将动画名称命名为flash，加了webkit的是为webkit浏览器做兼容。
当然这样写出来的代码，还并不能实现动画效果，那么要实现动画效果，我们必须激活此动画。
二、如何让动画在相应的css类标签中实现，当窗口滚动到动画处时激活动画
以上面的代码为例，我们将写一个css类来激活这个动画
.animate{
animation:flash 2s both;
-moz-animation:flash 2s both;/* Firefox */
-webkit-animation:flash 2s both; /* Safari and Chrome */
-o-animation:flash 2s both; /* Opera */
animation-play-state: paused;
}
.active .animate{
animation-play-state: running;
}
以上代码中，-moz-为火狐浏览器前缀，-webkit-为chrome及Safari浏览器前缀，-o-为opera浏览器前缀，这样才能兼容所有主流浏览器，不带前缀的即为IE浏览器。
1、animation:flash 2s both;参数说明
第一个参数：name (animation-name)：flash即为动画名称
第二个参数：keeping-time (animation-duration)：
整个动画的持续时间，必须带上时间单位，s或者ms均可；
第三个参数：animate-function (animation-timing-function)：
运动方式（动画方式）的贝赛尔曲线，可取值为：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。
第四个参数：delay (animation-delay)：
动画延迟执行的时间，单位也是s或者ms，值得注意的是，即使延迟时间为0，也必须加上时间单位，如果写成直接写成0，在Chrome和Safari(webkit)下是没问题的，但是在FF(gecko)下无效。
第五个参数：times (animation-iteration-count)：
动画循环执行的次数，无单位，infinite为无限循环。
第六个参数：iteration (animation-direction)：
如果动画循环，循环的方式是：alternate(偶数次向前播放，奇数次向后播放)、normal(每次都向前播放)。
第七个参数：final (animation-fill-mode)：
动画的最后（达到100%）时的状态，取值有：backward（回到初始状态）、forwards（停在最终状态）、none、both。
2、animation-play-state:设置播放与暂停
paused为暂停，running为播放
而其之前加了个.active意思为当窗口滚动到动画部分则激活动画运行。