自己先总结一下 css3 animate 动画的基本属性
css3 animate是一个复合属性 它包含6个基本属性
1、animation-name
animation-name指定了动画的名称
2、animation-duration
animation-duration 规定了动画的持续时间(指定一个动画规定的时长)，以秒(s)或者毫秒(ms)计,默认值是0s,表示无动画
animation-duration浏览器兼容：
3、animation-timing-function
规定了动画的速度曲线(该属性是使用三次贝塞尔函数的数字函数，用来生成速度曲线，你可以在该函数中使用自己的值，也可以使用预定义的值)
a、linear 线性的，速度重头到尾速度相同 b、ease 动画以低速开始，然后加速，在结束前变慢 c、ease-in 动画先慢后快 d、ease-out 动画先快后慢 e、ease-in-out 动画和ease是一样的，先慢后快，然后再慢，ease要快的突出一些，ease-in-out 快的不是那么突出 f、cubic-bezier(n,n,n,n) n的值可能是0-1中的任何值
我在做时钟动画效果还有圆环倒计时效果的时候用到了steps(a，b)函数，steps函数指定了一个阶跃函数，第一个参数指定了时间函数的间隔数量（必须是正整数）；第二个参数可选，接受start和end两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为end，通常我用的是step-start
4、animation-delay
该属性定义了动画开始之前的延迟，默认值为0，允许为负值，eg：-3s，表示跳过3秒马上进入动画
5、animation-iteration-count
该属性规定动画播放次数，值为n 或者infinite，infinite：循环播放
6、animation-direction
规定是否轮流反向播放动画，默认值是normal，正常播放动画，也可以是alternate：轮流反向播放
css3动画到这里就聊完了,css3除了动画，还有transform(变换)和transition(过渡)属性，搭配使用，可以做出很多动画效果 当然，css3动画是有bug的，很多前端技术开发人员现在追求奇异的代码风格，代码可读性降低，这对新人来说是不友好的。 css3动画bug
css3 Transition动画执行时有可能会出现闪烁的bug，一般出现在开始的时候或结束的时候。
解决方法如下：
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
需要应用在动画元素上即可
估计是Chrome在初始渲染CSS动画时产生的Bug
复制代码css动画卡顿方法
为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU，其实说白了这是一个小伎俩，也可以算是一个Hack，-webkit-transform:transition3d和-webkit-transform:translateZ其实是为了渲染3D样式，但我们设置值为0后，并没有真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。