13.（初级）CSS变形transform、过度transition、动画animation注意点及如何让动画更流畅方法

一、变形transform

1、倾斜skew()

skew(水平倾角,垂直倾角)

例如：

skew(20deg,30deg)

 

2、移动变形原点transform-origin

transform-origin:left/right/px/%  top/bottom/px/%;

例如：

transform-origin:left top;

相当于

transform-origin:0 0;

！注意所有变形transform并不会影响周围其他元素

二、过度transition

1、动画变换速率transition-timing-function

transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier()

说明：

linear：匀速过度

ease：慢—快—慢

ease-in：开始慢

ease-out：结束慢

ease-in-out：开始慢，结束慢

cubic-bezier()：贝塞尔曲线，曲线形状代表路径，曲线陡峭平缓代表速度快慢

可以访问http://cubic-bezier.com/手动调试

 

2、延迟开始过渡

transition-delay:xxxs;

3、简写

transition:

transition-property transition-duration transition-timing-function transition-delay;

说明：

transition-property：CSS属性/all（所有属性）

transition-duration：持续时间

例如：

transition:all 1s ease-in .5s;

三、动画animation

1、定义关键帧

@keyframes animation-name {

    form{

        css起始属性

}

to{

        css最终属性

    }

}

2、简写

animation:

animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode;

说明：

animation-name：动画名

animation-duration：动画持续时间

animation-timing-function：同transition-timing-function

animation-iteration-count：动画运行次数，num/infinite（永久）

animation-direction：

动画多次运行时，设置值alternate可奇数次正向播放，偶数次反向播放

animation-delay：延迟时间

animation-fill-mode：设置元素在动画完成后的样子，backward/forward/both

    backward：元素退回动画前的样子

    forward：元素显示成动画完成后的样子

    both：元素显示成动画前后的样子

3、手动暂停/开启动画

animation-play-state:running/paused;

四、让动画更流畅

动画会占用大量CPU，导致设备运行卡

以下过度不会占用过多CPU：

（1）透明度。

（2）transition:translate/scale/rotate。

（3）transform:translateZ(0)设置3D属性，但元素外观无变化，骗过浏览器，强制设备开启GPU，帮助渲染，但不能使用过多，使GPU占用过大。