Transition属性&&animation

transition: property duration timing-function delay;

 

transition 是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。类似flash的补间动画。但只有两个关键帧。开始，结束。

Animation：对元素某个属性或多个属性的变化，进行控制(时间等)，类似flash的补间动画。可以设置多个关键帧。

 

在做项目中经常会遇见这样的情景，比如一个按钮，当鼠标移入进去的时候改变按钮背景颜色以及字体颜色，此时我们一般会这么做：

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;}
.btn:hover{background:green;color:white;}

 

我们会发现背景以及字体颜色是瞬间改变的，是不是会显得特别生硬呢

此时transition就登场了，见代码：

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} 

.btn:hover{background:green;color:white;transition：0.4s;}

 

加入transition后我们会发现按钮背景颜色以及字体颜色具备一个时间渐进的过程，直至结束。

若是只想让背景颜色具备一个时间段的变化：transition: 0.4s background ease-in

transition虽然简单好用，但是我们会发现它受到各种限制。

1：transition需要一个事件来触发，比如hover，所以没法在网页加载时自动发生

2: transition是一次性的，不能重复发生，除非一再触发。

3： transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

4：一条transition规则，只能定义一个属性的变化，如果涉及两个属性，需要多次制定属性

 

transition:background-color .5s ease-in, width .5s ease-in

 

 

animation

1：animation动画不需要触发，一旦定义会自动播放

2：animation可以通过animation-iteration-count来设置循环次数。

3：animation可以定义多个关键帧

4：animation可以通过帧添加任何属性变化

div{
 width: 100px;
 height: 100px;
 background: red;
 animation: anim 5s infinite alternate;/*infinite alternate 一直执行*/
}

@keyframes anim{
 0%{background: red;left:0px;top:0px}
 25%{background: blue;left:200px;top:0px}
 50%{background: green;left: 200px;top:200px}
 75%{background: yellow;left: 0px;top:200px}
 100%{background: red;left: 0px;top:0px}
}

 

属性值：

 

GPU加速

动画卡顿是在移动端web开发时经常会遇到的问题，解决这个问题一般会用到css3硬件加速。主要是通过GPU进行渲染，解放CPU。

例如在使用animation时将left、top改为transform:translate()

原理：

DOM树和CSS结合后形成渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理。GPU中transform是不会触发repaint的，这一点类似于3D绘图功能，最终这些使用transform的图层都会由独立的合成器进程进行处理。

浏览器不直接通过CPU生成图像数据显示出来，而是把相关层数据发送给GPU，而GPU在图像数据运算方面有天生优势，所以算是加速。

 

如何开启GPU加速？很多浏览器提供了某些触发的CSS规则：

（1）3D变换

.cube {
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}

但是有时我们不需要对元素进行3D变换的效果，怎么办？可以使用小技巧“欺骗”浏览器来开启硬件加速。我们同样可以开启3D加速。例如可以使用transform:translateZ(0)来开启硬件加速。

（2）透视变换（perspective transform）CSS属性

（3）使用加速视频解码的元素，如<canvas>

（4）对自己的opacity做CSS动画，或者使用一个动画webkit变换的元素。

（5）拥有加速CSS过滤的元素，如CSS filters。

（6）拥有3D（webGL）上下文或者加速的2D上下文的canvas元素。