css transition animation的使用（内含贝赛尔曲线详解）(2)

在移动开发中直接使用transition动画会让页面变得非常卡顿（亲测），所以我们常用transform:translate3D(0,0,0)或者transform:translateZ(0)来开启移动端动画的gpu加速，使动画过程更流畅。
translate3D(0,0,0)是指电仪3D转换
translateZ(0)是指定义3D转换，只用Z轴

二、animation（动画效果）

因为animation动画是一段持续且循环的动画效果，所以不像transition过渡动画那样简洁，可能会涉及到很复杂的动画效果，所以我们要先学习一下@keyframes规则
该规则是用来创建动画的，说直白点就是告诉元素按哪种动画效果执行

@keyframes语法

@keyframes animationname {keyframes-selector {css-styles;}}

  值 描述
animationname   必需。定义动画的名称。  
keyframes-selector  

必需。动画时长的百分比。

合法的值：

0-100%

from（与 0% 相同）

to（与 100% 相同）

案例

（编辑：ASP站长网）