CSS-动画篇

过渡（transition）

• 通过过渡可以指定一个属性发生变化时的切换方式
• 必须外力推动，过渡效果是一次性，只能从边界开始或结束

简写语法

• transition: property duration timing-function delay;

属性

• transition-property: 指定要执行过渡的属性，多个属性间使用,隔开
  • 如果所有属性都需要过渡，则使用 all 关键字
  • 注意：过渡时必须是从一个有效数值向另外一个有效数值进行过渡
  • 示例：transition-property: height, width;
• transition-duration: 指定过渡效果的持续时间
  • 时间单位：s 和 ms 1s = 1000ms
• transition-timing-function: 过渡的时序函数，指定过渡的执行的方式
  • 可选值：
    • ease 默认值，慢速开始，先加速，再减速
    • linear 匀速运动
    • ease-in 加速运动
    • ease-out 减速运动
    • ease-in-out 先加速 后减速
    • cubic-bezier() 来指定时序函数
      • https://cubic-bezier.com
  • 示例：transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);
• transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡
  • 时间单位：s 和 ms
  • 示例：transition-delay: 2s;

动画（animation）

• 过渡需要在某个属性发生变化时才会触发,而动画可以自动触发动态效果
• 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

关键帧

• @keyframes 动画名称 {0%{}100%{}}：从 0%开始到 100%结束
• @keyframes 动画名称 {from{}to{}}：从 from 开始到 to 结束

简写语法

• animation: name duration timing-function delay iteration-count direction fill-mode play-state;

属性

• animation-name: 要对当前元素生效的关键帧的名字
• animation-duration: 动画的执行时间
• animation-delay：动画延时多久在执行
• animation-timing-function: 指定动画以什么方式执行
• animation-iteration-count：动画循环的次数
  • 可选值：number 次数 | infinite 无限执行
• animation-direction：指定动画运行的方向
  • 可选值：
    • normal：默认值，从 from 向 to 运行 每次都是这样
    • reverse：从 to 向 from 运行 每次都是这样
    • alternate：从 from 向 to 运行 重复执行动画时反向执行
    • alternate-reverse：从 to 向 from 运行 重复执行动画时反向执行
• animation-play-state: 设置动画的执行状态
  • 可选值：
    • running：默认值 动画执行
    • paused：动画暂停
• animation-fill-mode: 动画的填充模式
  • 可选值：
    • none：默认值，动画执行完毕元素回到原来位置
    • forwards：动画执行完毕元素会停止在动画结束的位置
    • backwards：动画延时等待时，元素就会处于开始位置
    • both：结合了 forwards 和 backwards

变形（transform）

• 通过 CSS 来改变元素的形状或位置
• 变形不会影响到页面的布局

平移(translate)

• translateX(x)：沿着 x 轴方向平移
• translateY(y)：沿着 y 轴方向平移
• translateZ(z)：沿着 z 轴方向平移
• translate(x,y)：定义 2D 转换
• translate3d(x,y,z)：定义 3D 转换
• 平移元素，百分比是相对于自身计算的
• z 轴平移，调整元素在 z 轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近
• z 轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果，必须要设置网页的视距
• 示例：transform: translateY(-100px);

旋转(rotate)

• rotateX(angle)：使元素沿着 x 轴的 2D 旋转指定的角度
• rotateY(angle)：使元素沿着 y 轴的 2D 旋转指定的角度
• rotateZ(angle)：使元素沿着 z 轴的 3D 旋转指定的角度
• rotate(angle)：定义 2D 旋转，在参数中规定角度
• rotate3d(x,y,z,angle)：定义 3D 旋转
• backface-visibility: hidden;
  • 是否显示元素的背面
  • 与旋转配合使用，当旋转到后面时元素消失

缩放(scale)

• scaleX(x)：水平方向缩放
• scaleY(y)：垂直方向缩放
• scaleZ(z)：通过设置 Z 轴的值来定义 3D 缩放转换
• scale(x,y)：定义 2D 缩放转换
• scale3d(x,y,z)：定义 3D 缩放转换

倾斜(skew)

• skew(x-angle,y-angle)：定义沿着 X 和 Y 轴的 2D 倾斜转换。
• skewY(angle)：定义沿着 Y 轴的 2D 倾斜转换。

变换矩阵(matrix)

• 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 矩阵。

transform-origin

• 语法：transform-origin: x-axis y-axis z-axis;
• 更换元素的位置
• x-axis: 定义视图被置于 X 轴的何处
  • left
  • right
  • center
  • length
  • %
• y-axis: 定义视图被置于 Y 轴的何处
  • top
  • center
  • bottom
  • length
  • %
• z-axis: 定义视图被置于 Z 轴的何处
  • length
• skewX(angle)：定义沿着 X 轴的 2D 倾斜转换。

transform-style

• 语法：transform-style: flat(表示所有子元素在 2D 平面呈现)|preserve-3d(表示所有子元素在 3D 空间中呈现);
• 让转换的子元素保留 3D 转换

perspective

• 语法：perspective: number|none;
  • number： 元素距离视图的距离，单位像素
  • none：默认值，不设置透视
• 设置从何处查看一个元素的角度
• 只影响 3D 转换元素

perspective-origin

• 语法：perspective-origin: x-axis y-axis;
• 定义 3D 元素所基于的 X 轴和 Y 轴。设置以底部为基准，人从x轴或y轴看的角度
• 示例：

{
  perspective:150;
  perspective-origin: 10% 10%;
  -webkit-perspective:150; /* Safari and Chrome */
  -webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}