CSS动画

CSS动画

定义

• 由许多静止的画面（帧）
• 以一定的速度（如每秒30张）连续播放时
• 肉眼因视觉残像产生错觉
• 而误以为是活动的画面

概念

• 帧：每个静止的画面都叫做帧
• 播放速度：每秒24帧（影视）或每秒30帧（游戏）

浏览器渲染

渲染过程

• 根据HTML构建HTML树（DOM）
• 根据CSS构建CSS树（CSSOM）
• 将两颗树合并成一颗渲染树（render tree）
• Layout 布局(文档流、盒模型、计算大小和位置)
• Paint 绘制(把边框颜色、文字颜色、阴影等画出来)
• Composite 合成(根据层叠关系展示画面)

三棵树

如何更新样式

一般用JS更新样式,比如：

• div.style.background ='red'
• div.style.display ='none'
• div.classList.add('red')
• div.remove()直接删掉节点

注意：写'样式'不如写'类'

三种更新方式

• 1.div.remove() 会触发当前小时，其他元素relayout
• 2.改变背景颜色 直接repaint+compasite
• 3.改变transform 只需compasite

如何查找每个属性触发的流程

csstriggers.com/

四、CSS动画优化

developers.google.com/web/fundame…

• JS优化： 使用 requestAnimationFrame代替 setTimeout 或 setlnterva
• CSS优化：使用 will-change 或 translate

transform

四个常用功能

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

注意

• 一般需要配合transition过度
• inline 元素不支持transform，需要先变成block

1、transform之translate位移

1. 常用写法

• translateX(length-percentage) ：x轴方向往右移动演示代码
• translateY(length-percentage)：y轴方向向下移动演示代码
• translate( length-percentage，length-percentage? )：X与Y的合写
• translateZ(length)且父容器有perspective属性用于定义视点（原点）：垂直于视点所在平面。视点为0，数字越大，距离视点越远，图像越大。反之，数字越小，距离视点越近，图像越小。代码示例
• translate3d(x, y, z)：X、Y、Z的合写

2. 经验

• 要学会看懂MDN的语法示例
• translate(-50%,- 50%)可做绝对定位元素的居中

left: 50%;
  /*  左边缘放在参照元素正中央 */
  top: 50%;
  /*  上边缘放在参照元素正中央 */
  transform: translateX(-50%) translateY(-50%);
  /*向左移动自己宽度的50% ，此时水平方向居中了。 向上移动自己高度的50% ，此时竖直方向居中了。整个都在参照元素中居中了*/
复制代码

代码示例

• 调试

2、transform之scale缩放

1. 常用写法

• scale( <number> )：XY方向一起缩放多少倍数
• scaleX( <number> )：X方向缩放
• scaleY( <number> )Y方向缩放
• scale( <number>，<number>? )：X、Y方向合写

2. 经验

• border也会一起缩放
• 用得较少，因为容易出现模糊

3、transform之rotate旋转

1. 常用写法

• rotate( [ <angle>| <zero> ]):（用的最多）默认是绕着垂直于屏幕的z轴旋转，从12点方向顺时针旋转
• rotateZ( [ <angle> | <zero> ])：同上
• rotateX( [ <angle> | <zero> ])：绕着x轴旋转
• rotateY( [ <angle>| <zero> ])：绕着Y轴旋转
• rotate3d：太复杂，无法用语言表述

代码示例

2. 经验

• 一般用于 360度旋转制作loading
• 用到时再搜索rotate MDN看文档

4、transform之skew倾斜

1. 常用写法

• skewX( [ <angle> | <zero> ]):把x轴倾斜
• skewY( [ <angle> | <zero> ])：把Y轴倾斜
• skew( [ <angle> | <zero> ],[ <angle>| <zero> ]?) 代码示例

2. 经验

• 用得较少
• 用到时再搜skew MDN文档

5、transform多重效果

组合使用：用空格隔开

• transform: scale(0.5) translate(-100%，- 100%);
• transform: none;取消所有

6、各功能常用写法

• 必读文档
• 注意：translate（-50%，-50%）可做绝对定位元素的局中

六、transition 过渡

作用

补充中间帧。必须给出开头和结束，中间自动补齐。一般会有一次或者两次动画。比如hover和非hover就是两次动画。

语法

• transition:属性名时长过渡方式延迟
• 例如transition: left 200ms linear
• 可以用逗号分隔两个不同属性
• 例如transition: left 200ms, top 400ms, transition: all 200ms
• 时长和延迟的单位可以写s、ms
• 过渡方式有：linear | ease | ease-in | ease-out | easein-out I cubic-bezier I step-start I step-end I steps, 具 体含义要靠数学知识
• 代码示例

不是所有属性都能过渡

• display: none => block 没法过渡
• —般改成 visibility: hidden => visible
• background颜色可以过渡:因为颜色是数字
• opacity透明度可以过渡
• 过度必须要有起始（比如hover和非hover状态的过度）

七、animation

1、@keyframes完整语法

1. @keyframes完整语法:

必读文档 2. 总共两种写法

• 一种写法是from to
• 一种写法是百分数

2、animation缩写语法

animation:时长|过渡方式|延迟|次数|方向|填充模式 |是否暂停|动画名；

• 时长：1s或者1000ms
• 过渡方式：跟transition取值一样，如linear
• 次数：3或者2.4或者infinite
• 方向：reverse | alternate | alternate-reverse
• 填充模式：none | forwards | backwards | both
• 是否暂停：paused | running
• 以上所有属性都有对应的单独属性

八、实战--跳动的心

1、步骤

① CSS reset

② 把三块内容基本的边框、宽、高写好

③ 把三块内容的位置定好

• 用绝对定位
• 用transform

④ 动画效果

方法一:

• 设置鼠标浮上去即变化：hover+具体变化transform: scale(0.5);
• 用transition过渡，做成动画效果

代码实列饥人谷JS Bin (jirengu.com)

*方法二:

• 使用@keyframes和animation

代码饥人谷JS Bin (jirengu.com)