css3 animate 经常使用动画

本身先总结一下 css3 animate 动画的基本属性

css3 animate是一个复合属性 它包含6个基本属性

一、animation-name

animation-name指定了动画的名称

二、animation-duration

animation-duration 规定了动画的持续时间(指定一个动画规定的时长)，以秒(s)或者毫秒(ms)计,默认值是0s,表示无动画

animation-duration浏览器兼容：

三、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

四、animation-delay

该属性定义了动画开始以前的延迟，默认值为0，容许为负值，eg：-3s，表示跳过3秒立刻进入动画

五、animation-iteration-count

该属性规定动画播放次数，值为n 或者infinite，infinite：循环播放

六、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硬件加速模式。    

本文章后面会持续更新