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(<length-percentage>)

    • translateY(<length-percentage>)

    • translate(<length-percentage> ,<length-percentage>? ) ?代表可以省略

    • translateZ(<length>)且父容器 perspective(试点或景深)

    • translate3d(x, y, z)

      • 绝对居中的完美答案

        •         top:50%;
                  left:50%;
                  transform:translate(-50%,-50%);
                  // 父元素必须设置了定位
          
          
  • 缩放 scale 用的较少 因为容易模糊

    • scaleX( <number>)

    • scaleY( <number>)

    • scale( <number> , <number>? )

  • 旋转 rotate

    • rotate( [ <angle> |<zero>])

    • rotateZ([<angle> | <zero>])

    • rotateX([<angle> | <zero>])

    • rotateY([ <angle> | <zero>])

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

  • 倾斜 skew

    • skewX([<angle>|<zero>])

    • skewY([ <angle><zero>])

    • skew( [ <angle><zero>],[<angle>|<zero>]?)

  • 组合使用

    • 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:动画名称   动画时间  动画的速度曲线  动画延迟   播放次数  方向   暂停开始   起始位置        //写在相应的元素上面</pre>

推荐阅读更多精彩内容

  • css性能介绍 浏览器渲染步骤 根据HTML构建HTML树(DOM),DOM,也就是文档对象模型(Document...
    郑馋师阅读 34评论 0 0
  • Get Started • 动画的原理• 浏览器渲染原理• CSS动画优化• transform全解• trans...
    饥人谷_唐诗佳阅读 69评论 0 1
  • Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭...
    Robertbiu阅读 141评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 947评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,021评论 0 11