【学习】CSS动画

CSS动画 笔记

动画的原理

动画是将静止的画面变为动态的艺术．实现由静止到动态，主要是靠人眼的视觉残留效应．利用人的这种视觉生理特性可制作出具有高度想象力和表现力的动画影片

浏览器渲染原理

浏览器渲染过程

• 步骤
  • 根据HTML构建HTML树 （DOM）
  • 根据CSS构建CSS树（CSSDOM）
  • 将两棵树合并成一颗渲染树（render tree）
  • Layout 布局（文档流，盒模型，计算大小和位置）
  • Paint 绘制（把边框颜色，文字颜色，阴影等画出来）
  • Composite 合成（根据层叠关系展示画面）
• 如何更新样式
  • 一般用JS来更新样式
    • 比如 div.classList.add('red')
    • 比如 div.remove()
  • 三种更新方式
    • JS/CSS → 样式 → 布局 → 绘制 → 合成
    • JS/CSS → 样式 → 绘制 → 合成
    • JS/CSS → 样式 → 合成
    • 可以在 https://csstriggers.com/ 里看CSS属性是哪种更新方式
• CSS动画优化
  • 看Google文档
  • JS优化
    • 使用requestAnimationFrame代替setTimeout或者setInterval
  • CSS优化
    • 使用will-change或者translate

transform

常用功能

• 位移 translate
• 缩放 scale
• 旋转 rotate
• 倾斜 skew

translate 位移

• 常用写法
  • translateX(<length-percentage>)
  • translateY(<length-percentage>)
  • translate(<length-percentage>,<length-percentage>?)
  • translateZ(<length>) 且父容器perspective
  • translate3d(x,y,z)
• translate(-50%,-50%) 可做绝对定位元素的居中

div {
  left:50%;
  right: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>])
• 一般用于360°旋转制作loading

skew 倾斜

• 常用写法
  • skewX([<angle> | <zero>])
  • skewY([<angle> | <zero>])
  • skew([<angle> | <zero>],<angle> | <zero>]?)
• 用的较少

transtion 过渡

• 作用：补充中间帧
• 语法
  • 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
• 并不是所有的属性都可以过渡
  • display:none; 转换成 display:block;，或者display:block;转换成display:none;
  • 如果想要从看不见到看见的效果，一般为visibility:hidden;转换成visibility:visible;
• 过渡必须要有起始
• 如果有两次动画如何做
  • 使用两次 transform
    • .a ==== transform ====>.b
    • .b ==== transform ====>.c
    • 如何知道中间点
      • 用setTimeout或者监听transitionend事件
  • 使用 animation
    • 声明关键帧
    • 添加动画

@keyframes 关键帧

和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

要使用关键帧, 先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。可以按任意顺序列出关键帧百分比；它们将按照其应该发生的顺序来处理。

• 两种写法

@keyframes slidein {
  from {
    transform: translateX(0%); 
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

animation

• 缩写语法
  animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 |填充方式 | 是否暂停 | 动画名;
  • 时长：1s或者1000ms
  • 过渡方式：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
  • 次数：3或者2.4或者infinite
  • 方向：reverse | alternate | alternate-reverse
  • 填充模式：none | forwards | backwards | both
  • 是否暂停：paused | running
  • 以上所有的属性都有对应的单独属性