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元素。