学习链接

CSS3-animation动画详解

CSS3-transition过渡动画详解

重学前端之CSS(四)CSS过渡与动画

用CSS开启硬件加速来提高网站性能（转）

CSS动画与GPU

CSS Transform: How to Use It on Your Website

过渡与动画

CSS 过渡与动画

过渡 transition

属性 含义
transition-property 指定使用过渡效果的 CSS 属性，默认值为 **all**
transition-duration 设置过渡动画持续时间，默认值为 **0s**，不设置则无过渡效果
transition-timing-function 设置动画的时间函数，默认为 **ease**
transition-delay 设置动画的延迟触发时间，默认值为 **0s**

animation-timing-function 定义动画事件函数，animation 族属性中也有该属性，该属性可以改变动画的执行速率以及轨迹。

值 描述
linear 动画从头到尾的速度是相同的。
ease（缓解） **默认值**：动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 贝塞尔曲线（自定义数值），可到相关网站可视化设置。

多属性累加

transition 族属性都可以设置多个值，各个值之间使用 , 隔开，从而分别设置各个属性的过渡效果。

其它 transition 族属性在设置多个值时，要与 **transition-property** 定义的各个属性对应起来，才能准确对目标属性定制过渡效果。

例如：

  1. transition-property: width, heitht, color ;
  2. trnasition-duration: 1s, 1.5s, 2s ;
  3. transition-timing-function: ease, linear, ease-in-out ;
  4. transition-delay: 0s, 1s, 0s ;

可使用 transition 简写属性，定义顺序分别为：

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

下面代码与上例效果相同

  1. transition: width 1s ease ,heitht 1.5s linear 1s, color 2s ease-in-out ;

transition 不能支持的过渡

  • z-index
  • display

动画 animation

  1. 通过 @keyframes 自定义关键帧动画并为动画命名，可以在其中对每一帧进行设置。
  2. 使用自定义动画的元素，需要通过 animation 相关属性进行配置
    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction
    • animation-fill-mode
    • animation-play-state

我们还可在JavaScript中，通过驼峰式命名来访问/设置animation相关属性。

定义动画

@keyframes 关键帧

在 CSS 样式表中可以通过 @keyframes 来设置关键帧动画，并指定动画名称供使用者锁定。

可通过百分比来设置具体帧数的样式。0% 和 100% 代表 首尾帧，可分别用 from、to 替代。

  1. @keyframes animateName{
  2.     0%   { width:50px; height:50px; } /* from { width:50px; height:50px; } */
  3.     50%  { width:100px; height:100px; }
  4.     100% { width:50px; height:50px; }  /* to { width:50px; height:50px; } */
  5. }

若自定义动画未定义首尾帧，则首尾帧将会应用使用者的原有样式

使用动画

属性 含义
animation-name 指定使用的动画名称
animation-duration 设置动画持续时间，默认值为 **0s**，不设置则无动画效果
animation-timing-function 设置动画的时间函数，默认为 **ease**，取值参考 transition
animation-delay 设置动画的延迟触发时间，默认值为 **0s**
animation-iteration-count 设置动画的执行次数，默认为 **1** (infinite 无限次)
animation-direction 设置动画的执行方向，默认为 **normal**
animation-fill-mode 设置动画的填充模式，默认为 **none**
animation-play-state 设置动画的执行状态，默认为 **running**(paused 暂停)，js 可控制

animation-direction

animation-direction 用于设置动画执行方向

值 描述
normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate（交替的） 动画正向交替执行（正向->反向）Loop。
alternate-reverse 动画反向交替执行（反向->正向）Loop。
inherit 从父元素继承该属性。

animation-fill-mode

animation-fill-mode 用于设置动画的填充模式

值 描述
none 默认值。动画在动画执行前后，不会应用任何样式到目标元素
forwards 在动画结束后（由 animation-iteration-count 决定），目标元素将保持应用最后帧动画
backwards 在动画结束后（由 animation-iteration-count 决定），目标元素将保持应用起始帧动画

注意：上述代码若 animation-iteration-count: infinite，由于动画次数无限执行，不会结束，也就不会应用最后帧样式

animation-play-state

设置动画的执行状态，通常通过 JavaScript 动态控制。（小驼峰命名）

  • 默认值为：running
  • 设为 paused (暂停)，动画将停止执行。
  1. document.querySelector("div").style.animationPlayState = paused;

多属性累加

  1. 首先使用 animation-name 来锁定使用的各个动画
  2. 之后使用其它的 animation 族属性，分别约束对应动画，且设置顺序与 animation-name 使用动画的顺序保持一致。
  1. animation-name: name1, name2, name3;
  2. animation-duration: 1s, 2s, 3s;
  3. animation-iteration-count: 1, 2, 3;
  4. animation-direction: reverse, normal, normal;
  5. animation-fill-mode: forwards, forwards, forwards;

👇

  1. animation: name1 1s 1 reverse forwards,
  2.            name2 2s 2 normal forwards,
  3.            name3 3s 3 normal forwards;

animation 简写属性：

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state

CSS 动画优化

  • 只允许改变 transform、opacity，其它属性不要动，避免重新计算布局（reflow）
  • 对动画元素应用 transform: translate3d(0, 0, 0)、will-change: transform 等，开启硬件加速
  • 动画元素尽量用 fixed、absolute 定位方式，避免 reflow
  • 对动画元素应用高一点的 z-index，减少复合层数量

转换 transform

案例

transform 属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

transform-origin：转换元素的转换原点（围绕那个点进行转换），默认的转换原点是center

四个常用的功能：

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

一般配合 transition 过渡使用。

transform不支持 inline 元素，使用前把它变成 block 元素。

  1. transform: none|transform-functions;
  • transform-function
    要应用的一个或多个 CSS 变换函数。
    变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。
  • none
    不应用任何变换。 | 值 | 描述 | | —- | —- | | none | 定义不进行转换 | | matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵 | | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵 | | translate(x,y) | 定义 2D 转换 | | translate3d(x,y,z) | 定义 3D 转换 | | translateX(x) | 定义转换，只是用 X 轴的值 | | translateY(y) | 定义转换，只是用 Y 轴的值 | | translateZ(z) | 定义 3D 转换，只是用 Z 轴的值 | | scale(x[,y]) | 定义 2D 缩放转换 | | scale3d(x,y,z) | 定义 3D 缩放转换 | | scaleX(x) | 通过设置 X 轴的值来定义缩放转换 | | scaleY(y) | 通过设置 Y 轴的值来定义缩放转换 | | scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换 | | rotate(angle) | 定义 2D 旋转，在参数中规定角度 | | rotate3d(x,y,z,angle) | 定义 3D 旋转 | | rotateX(angle) | 定义沿着 X 轴的 3D 旋转 | | rotateY(angle) | 定义沿着 Y 轴的 3D 旋转 | | rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转 | | skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换 | | skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换 | | skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换 | | perspective(n) | 为 3D 转换元素定义透视视图 |

补充比较

javascript直接实现
JS实现动画导致页面频繁性重排重绘，消耗性能.

SVG（可伸缩矢量图形）

  1. 控制动画延时
  2. 控制属性的连续改变
  3. 控制颜色变化
  4. 控制如缩放,旋转等几何变化
  5. 控制SVG内元素的移动路径

SVG是对图形的渲染，HTML是对DOM的渲染

CSS3 transition
transition是过渡动画。但transition不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变
注意在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。所以我们通常添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅

CSS3 animation
animation 算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡
比较CSS3最大的优势是摆脱了js的控制，并且能利用硬件加速以及实现复杂动画效果

Canvas
canvas作为H5新增元素，借助Web API来实现动画
只有width和height两个属性

requestAnimationFrame
requestAnimationFrame是另一种Web API，执行动画的效果，会在一帧(一般是16ms)间隔内根据选择浏览器情况执行相关动作
会在下次重绘之前调用指定的回调函数更新动画。
raf按照系统刷新的节奏调用！！
在性能上比另两者要好。
通常，我们将执行动画的每一步传到requestAnimationFrame中，在每次执行完后进行异步回调来连续触发动画效果。