CSS动画详解

CSS动画详解

1.动画的原理

人的视觉暂留而形成，一帧一帧其实都是类似静止的图片

定义：

• 由许多静止的画面 (帧)

• 以一定的速度 (如每秒30张) 连续播放时

• 肉眼因视觉残象产生错觉

概念：

• 帧：每个静止的画面

• 播放速度:每秒24帧(影视)或者每秒30帧（游戏)

2.浏览器渲染原理

步骤：

1. 根据HTML构建HTML树 (DOM)

2. 根据CSS构建 CSS树 (CSSOM)

3. 将两棵树合并成一颗渲染树 (render tree)

4. Layout布局(文档流、盒模型、计算大小和位置)

5. Paint绘制(把边框颜色、文字颜色、阴影等画出来)

6. Compose 合成 （根据层叠关系展示画面）

用js更新样式的一般方法

• 比如div.style.background = 'red'

• 比如div.style.display = 'none'

• 比如div.classList.add('red')

• 比如div.remove(直接删掉节点

以上方法的异同：

先看三种解析方式

donghua.png

(图片来自饥人谷)

1. 第一种全部流程的

   • div.remove() 会触发当前消失，其他元素relayout

2. 第二种跳过 layout布局

   • 改变背景颜色这种，直接repaint + composite

3. 第三种，跳过layout和paint

   • 改变transform，只需composite

   • 注意必须全屏查看效果,在iframe里看有问题

3.CSS动画优化

参考文章 ： https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

• JS的优化 使用使用requestAnimationFrame代替setTimeout或setInterval

• CSS优化： 使用 will - change 或者 translate

4.transform完整介绍

四个常用功能

• 位移 translate

  • translateX()

  • translateY()

  • translate( ,? ) ?代表可以省略

  • translateZ()且父容器 perspective（试点或景深）

  • translate3d(x, y, z)

    • 绝对居中的完美答案

      •         top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                // 父元素必须设置了定位
        
        

• 缩放 scale 用的较少 因为容易模糊

  • scaleX( )

  • scaleY( )

  • scale( , ? )

• 旋转 rotate

  • rotate( [ |])

  • rotateZ([ | ])

  • rotateX([ | ])

  • rotateY([ | ])

  • rotate3D 太复杂，详细请查资料

• 倾斜 skew

  • skewX([|])

  • skewY([ ])

  • skew( [ ],[|]?)

• 组合使用

  • transform: scale(0.5) translate(-100%,-100%);

  • transform: none;取消所有

经验：

• 一般都需要配合 transition 过渡

• inline 元素不支持 transform ，需要先变成 block

5.transition过渡动画

作用：

• 补充中间帧

语法：

• transition:属性名 时长 过渡方式 延迟

• transition: left 200ms linear

• 可以用逗号分隔两个不同属性

• transition: left 200ms, top 400ms

• 可以用all 代表所有属性

• transition: all 200ms

• 过渡方式有:linear ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps，具体含义要靠数学知识 https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function

注意：不是所有属性都能过渡

• display: none => block没法过渡

• 一般改成visibility: hidden => visible

• display和 visibility的区别自己搜一下

• background颜色也可以过度

6.animation动画

@keyframes 动画名称{
 0%{       //起始和结束状态缺少时,会以元素默认的状态为起始和结束状态

 }
 ...中间可以定义无限关键帧    也可以写成  from   to 形式
 100%{

 }
}
关键帧不写属性即为默认值
动画要与相应的元素结合才能触发效果
​
animation-name:动画名称;
animation-duration:动画时长;
animation-timing-function:动画速度曲线;有如下几个
 1.ease
 2.ease-in
 3.ease-in-out
 4.ease-out
 5.steps()    步数，可以做动态图
 6.贝塞尔曲线
 7.linear 匀速
animation-delay:动画延迟时间   默认为零
 1.n(指定时间)s
animation-iteration-count: 动画播放次数 
 1.infinite无限播放次数
 2.n(指定次数)
animation-direction:规定动画是否在下一周期逆向播放   默认值normal:每次都正向播放   altermate:奇数次正向播,偶数次反向播 
 1.reverse:每次都反向 
 2.alternate-reverse:奇数次反向播,偶数次正向播
animation-fill-mode:起始位置 
 1.默认值backwards(回到最初状态)
 2.forwards:保留最后一帧
animation-play-state:动画的运行/暂停 
 1.默认running 
 2.paused:暂停
综合样式：
animation:动画名称   动画时间  动画的速度曲线  动画延迟   播放次数  方向   暂停开始   起始位置        //写在相应的元素上面