CSS Transition & Transform & Animation

CSS Transition 和 Timing Function 概念

CSS 过渡（Transitions）和时间函数（Timing Functions）是用于在元素的不同状态之间创建平滑动画效果的工具。以下是这些概念和相关属性的详细解释。

Transition 属性

transition 属性用于指定元素状态变化时的动画效果。它可以定义哪些属性需要过渡效果、过渡的持续时间、过渡的时间函数以及延迟时间。

定义过渡属性

.transition-box {
  transition: width 1s, height 1s, background-color 2s;
}

上面的代码定义了 .transition-box 元素的 width 和 height 属性在 1 秒内平滑过渡，background-color 属性在 2 秒内平滑过渡。

过渡效果的触发

.transition-box:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

当 .transition-box 元素被悬停时，它的宽度、高度和背景颜色会在指定的时间内平滑变化。

全局过渡

transition: all 1s linear;

all 关键字表示所有可动画的属性都将执行过渡，持续时间为 1 秒，使用 linear 时间函数。

Transition-Timing-Function 属性

transition-timing-function 属性定义了过渡效果的速度曲线。不同的时间函数使过渡效果看起来不一样。

关键字值

• ease: 慢速开始，快速中间，慢速结束。
• ease-in: 慢速开始。
• ease-out: 慢速结束。
• ease-in-out: 慢速开始和结束。
• linear: 匀速过渡。
• step-start: 立即跳到结束状态。
• step-end: 立即跳到开始状态。

/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

函数值

• steps(int, [jumpterm]): 定义分步过渡。
• cubic-bezier(x1, y1, x2, y2): 使用三次贝塞尔曲线定义自定义过渡。

/* Function values */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

Steps 函数关键字

• jump-start: 开始时跳跃。
• jump-end: 结束时跳跃。
• jump-none: 无跳跃。
• jump-both: 开始和结束时跳跃。
• start: 从起点开始。
• end: 到终点结束。

/* Steps Function keywords */
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

多重时间函数

可以组合多个时间函数以创建复杂的过渡效果。

/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

全局值

• inherit: 继承父元素的值。
• initial: 使用默认值。
• revert: 恢复为用户代理样式表中的值。
• revert-layer: 恢复为样式层次中的值。
• unset: 重置为自然值（即继承或初始值）。

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;

使用这些 CSS 过渡和时间函数属性，可以让网页动画效果更加自然和流畅。

CSS Transform 属性

CSS transform 属性允许你在二维或三维空间中对元素进行变换，如移动、旋转、缩放和倾斜。这些变换可以创建动态和互动的网页效果。以下是详细的解释。

Translate

translate 函数用于移动元素。它接受两个参数，分别表示在 X 轴和 Y 轴上的移动距离。

transform: translate(100px, 150px);

单独使用

• translateX: 仅在 X 轴上移动元素。
• translateY: 仅在 Y 轴上移动元素。

transform: translateX(100px);
transform: translateY(150px);

Rotate

rotate 函数用于旋转元素。它接受一个参数，表示旋转的角度。

transform: rotate(30deg);

Transform-Origin

transform-origin 属性定义了变换的基点，即元素变换时的中心点。默认情况下，这个点在元素的中心。

transform-origin: right bottom;
transform-origin: center;

• right bottom: 变换基点在元素的右下角。
• center: 变换基点在元素的中心。

Scale

scale 函数用于缩放元素。它可以接受一个或两个参数，分别表示在 X 轴和 Y 轴上的缩放比例。

transform: scale(0.5, 2);

• scale(0.5, 2): 在 X 轴上缩小到 0.5 倍，在 Y 轴上放大到 2 倍。
• scale(0.5): 在 X 和 Y 轴上都缩小到 0.5 倍。

Skew

skew 函数用于倾斜元素。它可以接受一个或两个参数，分别表示在 X 轴和 Y 轴上的倾斜角度。

transform: skew(20deg);       /* 在 X 轴上倾斜 20 度 */
transform: skew(-20deg);      /* 在 X 轴上倾斜 -20 度 */
transform: skew(-20deg, 20deg); /* 在 X 轴上倾斜 -20 度，Y 轴上倾斜 20 度 */

通过这些 transform 属性和函数，可以对网页元素进行多种变换，如移动、旋转、缩放和倾斜，进而创建丰富的视觉效果和互动体验。

CSS 3D Transform 属性

CSS 3D 变换属性允许你在三维空间中对元素进行操作，如移动、旋转和透视。这些变换可以创建更加立体和真实的视觉效果。以下是详细的解释。

Transform-Style

transform-style 属性指定元素的子元素是否在 3D 空间中保留其 3D 位置。

transform-style: preserve-3d;

• preserve-3d: 保留 3D 变换效果，使子元素在 3D 空间中展示。
• flat: 子元素在 2D 平面中展示。

Perspective

perspective 属性为元素定义了透视视角，决定了元素的深度感。

perspective: 500px;

• 500px: 视角点与元素之间的距离，值越小，透视效果越强。

Translate3D

translate3d 函数用于在三维空间中移动元素。它接受三个参数，分别表示在 X、Y 和 Z 轴上的移动距离。

.transform-box:hover {
  transform: translate3d(0, 0, 100px);
}

• translate3d(0, 0, 100px): 在 Z 轴上移动 100 像素。

Rotate3D

rotate3d 函数用于在三维空间中旋转元素。它接受四个参数，前三个参数表示旋转轴的 X、Y 和 Z 分量，第四个参数表示旋转的角度。

transform: rotate3d(1, 0, 0, 100deg); /* 绕 X 轴旋转 100 度 */
transform: rotate3d(0, 1, 0, 100deg); /* 绕 Y 轴旋转 100 度 */
transform: rotate3d(0, 2, 1, 100deg); /* 绕 (0, 2, 1) 轴旋转 100 度 */

• rotate3d(1, 0, 0, 100deg): 绕 X 轴旋转 100 度。
• rotate3d(0, 1, 0, 100deg): 绕 Y 轴旋转 100 度。
• rotate3d(0, 2, 1, 100deg): 绕 (0, 2, 1) 轴旋转 100 度。

通过这些 3D 变换属性和函数，可以在网页中创建更加立体和动态的元素效果，增强用户的视觉体验和互动感。

CSS Animation 和 Keyframes 属性

CSS 动画（Animation）允许你通过关键帧（Keyframes）定义逐帧动画效果，从而创建复杂的动画。以下是详细的解释。

Animation 属性

animation 属性用于将动画应用到元素。它可以指定动画的名称、持续时间、播放次数等。

.transform-box {
  animation: changeColor 3s infinite;
}

• changeColor: 动画名称，对应 @keyframes 中定义的动画。
• 3s: 动画持续时间为 3 秒。
• infinite: 动画无限次播放。

Keyframes

@keyframes 规则用于定义动画的关键帧。每个关键帧描述了动画在特定时间点的样式。

@keyframes changeColor {
  0% {
    background-color: red;
  }

  50% {
    background-color: yellow;
  }

  100% {
    background-color: green;
  }
}

• 0%: 动画的起始状态，背景颜色为红色。
• 50%: 动画进行到一半时，背景颜色变为黄色。
• 100%: 动画的结束状态，背景颜色变为绿色。

动画参数

除了名称、持续时间和播放次数，animation 属性还可以设置其他参数：

• animation-timing-function: 定义动画的速度曲线（如 ease, linear, ease-in, ease-out）。
• animation-delay: 设置动画开始前的延迟时间。
• animation-direction: 指定动画的方向（如 normal, reverse, alternate, alternate-reverse）。
• animation-fill-mode: 指定动画在执行前后如何应用样式（如 none, forwards, backwards, both）。
• animation-play-state: 控制动画的播放状态（如 running, paused）。

综合应用示例

以下是一个综合应用示例，包含上述所有参数：

.transform-box {
  animation: changeColor 3s ease-in-out infinite 1s alternate both;
}

@keyframes changeColor {
  0% {
    background-color: red;
  }

  50% {
    background-color: yellow;
  }

  100% {
    background-color: green;
  }
}

• ease-in-out: 动画的速度曲线。
• 1s: 动画开始前的延迟时间。
• alternate: 动画在每次循环时交替反转。
• both: 动画在执行前后保留最终状态的样式。

通过这些 CSS 动画属性和关键帧规则，可以创建丰富多样的动画效果，增强网页的动态表现力和用户体验。