5000 字总结CSS 中的过渡、动画和变换详解

CSS 中的过渡、动画和变换详解

一、CSS 过渡（Transitions）

1. 基本概念

CSS 过渡是一种平滑改变 CSS 属性值的机制，允许属性值在一定时间内从一个值逐渐变化到另一个值，从而创建流畅的动画效果。过渡只能用于具有中间值的属性（如颜色、大小、位置等），不能用于 display 等离散属性。

2. 核心属性

transition-property

指定哪些 CSS 属性参与过渡。可以是单个属性（如width）、多个属性（如width, height）或all（所有可过渡属性）。

css 复制代码

.element {
  transition-property: width, height;
}

transition-duration

指定过渡持续的时间，单位可以是秒（s）或毫秒（ms）。

css 复制代码

.element {
  transition-duration: 0.5s; /* 0.5秒 */
}

transition-timing-function

定义过渡的速度曲线，常见值包括：

ease：默认值，慢-快-慢
linear：匀速
ease-in：慢速开始
ease-out：慢速结束
ease-in-out：慢速开始和结束
cubic-bezier(n,n,n,n)：自定义贝塞尔曲线

css 复制代码

.element {
  transition-timing-function: ease-in-out;
}

transition-delay

指定过渡开始前的延迟时间。

css 复制代码

.element {
  transition-delay: 0.2s; /* 延迟0.2秒 */
}

3. 简写语法

css 复制代码

.element {
  transition: width 0.5s ease-in-out 0.2s;
  /* 依次为：属性 持续时间 时间函数 延迟时间 */
}

4. 触发方式

过渡需要一个触发条件才能生效，常见的触发方式有：

:hover 伪类

css 复制代码

.button {
  background-color: blue;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: red;
}

:focus 伪类

css 复制代码

.input {
  border: 1px solid #ccc;
  transition: border-color 0.3s;
}

.input:focus {
  border-color: blue;
}

JavaScript 动态修改

html 复制代码

<button id="changeColor">变色</button>
<div id="box" style="width: 100px; height: 100px; background-color: red; transition: background-color 0.5s;"></div>

<script>
  document.getElementById('changeColor').addEventListener('click', () => {
    const box = document.getElementById('box');
    box.style.backgroundColor = box.style.backgroundColor === 'red' ? 'blue' : 'red';
  });
</script>

5. 应用场景

按钮悬停效果
导航栏交互
表单元素状态变化
图片缩放预览

二、CSS 动画（Animations）

1. 基本概念

CSS 动画通过 @keyframes 规则定义一系列关键帧，然后将这些关键帧应用到元素上，实现更复杂、更可控的动画效果。与过渡不同，动画不需要触发条件，可以自动运行。

2. @keyframes 规则

定义动画的关键帧，格式如下：

css 复制代码

@keyframes animationName {
  0% { /* 初始状态 */ }
  50% { /* 中间状态 */ }
  100% { /* 结束状态 */ }
}

也可以使用 from 和 to 表示 0% 和 100%：

css 复制代码

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

3. 动画属性

animation-name

指定要应用的动画名称，对应 @keyframes 定义的名称。

css 复制代码

.element {
  animation-name: fadeIn;
}

animation-duration

指定动画的持续时间，单位为秒（s）或毫秒（ms）。

css 复制代码

.element {
  animation-duration: 2s;
}

animation-timing-function

定义动画的速度曲线，与过渡的 timing-function 类似。

css 复制代码

.element {
  animation-timing-function: ease-in-out;
}

animation-delay

指定动画开始前的延迟时间。

css 复制代码

.element {
  animation-delay: 0.5s;
}

animation-iteration-count

指定动画的播放次数，可以是数字或 infinite（无限循环）。

css 复制代码

.element {
  animation-iteration-count: 3; /* 播放3次 */
}

animation-direction

指定动画的播放方向，常见值包括：

normal：默认值，正向播放
reverse：反向播放
alternate：正向和反向交替播放
alternate-reverse：反向和正向交替播放

css 复制代码

.element {
  animation-direction: alternate;
}

animation-fill-mode

定义动画在播放前和播放后的状态，常见值包括：

none：默认值，不应用任何样式
forwards：保持动画结束时的状态
backwards：在延迟期间应用动画的初始状态
both：同时应用 forwards 和 backwards

css 复制代码

.element {
  animation-fill-mode: forwards;
}

animation-play-state

控制动画的播放状态，可以是 running 或 paused。

css 复制代码

.element {
  animation-play-state: paused;
}

4. 简写语法

css 复制代码

.element {
  animation: fadeIn 2s ease-in-out 0.5s 3 alternate forwards;
  /* 依次为：名称 持续时间 时间函数 延迟时间 播放次数 播放方向 填充模式 */
}

5. 应用场景

加载动画
通知提示效果
页面滚动动画
互动游戏元素

三、CSS 变换（Transforms）

1. 基本概念

CSS 变换允许改变元素的形状、大小和位置，而不影响文档流。变换可以是 2D 或 3D 的，通过 transform 属性实现。

2. 2D 变换

translate()

移动元素的位置，参数为 X 和 Y 方向的偏移量。

css 复制代码

.element {
  transform: translate(50px, 20px); /* 向右移动50px，向下移动20px */
}

rotate()

旋转元素，参数为旋转角度（单位为 deg）。

css 复制代码

.element {
  transform: rotate(45deg); /* 顺时针旋转45度 */
}

scale()

缩放元素，参数为 X 和 Y 方向的缩放比例。

css 复制代码

.element {
  transform: scale(1.5, 0.8); /* 水平放大1.5倍，垂直缩小0.8倍 */
}

skew()

倾斜元素，参数为 X 和 Y 方向的倾斜角度。

css 复制代码

.element {
  transform: skew(20deg, 10deg); /* 水平倾斜20度，垂直倾斜10度 */
}

matrix()

使用矩阵方式定义变换，包含六个参数：matrix(a, b, c, d, e, f)。

css 复制代码

.element {
  transform: matrix(1.1, 0, 0, 1.1, 50, 0); /* 相当于 scale(1.1) translate(50px, 0) */
}

3. 3D 变换

translate3d()

在 3D 空间中移动元素，参数为 X、Y、Z 方向的偏移量。

css 复制代码

.element {
  transform: translate3d(50px, 20px, 100px);
}

rotate3d()

在 3D 空间中旋转元素，参数为 (x, y, z, angle)，其中 x、y、z 定义旋转轴。

css 复制代码

.element {
  transform: rotate3d(1, 1, 0, 45deg); /* 绕X轴和Y轴的对角线旋转45度 */
}

scale3d()

在 3D 空间中缩放元素，参数为 X、Y、Z 方向的缩放比例。

css 复制代码

.element {
  transform: scale3d(1.5, 0.8, 2);
}

perspective()

设置透视效果，定义观察者与 z=0 平面的距离。

css 复制代码

.container {
  perspective: 1000px;
}

.element {
  transform: perspective(1000px) rotateY(45deg);
}

transform-style

指定子元素是否保留 3D 变换效果，值为 flat（默认）或 preserve-3d。

css 复制代码

.container {
  transform-style: preserve-3d;
}

backface-visibility

控制元素背面是否可见，值为 visible（默认）或 hidden。

css 复制代码

.card {
  backface-visibility: hidden;
}

4. 变换原点

transform-origin 属性允许改变变换的原点位置，默认值为元素中心 (50% 50%)。

css 复制代码

.element {
  transform-origin: top left; /* 变换原点为左上角 */
  transform: rotate(45deg);
}

四、综合应用

1. 过渡与变换结合

css 复制代码

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
  background-color: red;
  transform: scale(1.1);
}

2. 动画与变换结合

css 复制代码

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.ball {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  animation: bounce 1s infinite;
}

3. 3D 卡片翻转效果

css 复制代码

.card {
  width: 200px;
  height: 200px;
  perspective: 1000px;
  position: relative;
}

.card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-front {
  background-color: #bbb;
  color: black;
}

.card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

五、性能优化

1. 使用 transform 和 opacity

transform 和 opacity 是性能最高的 CSS 属性，因为它们不会触发重排（reflow）和重绘（repaint），只会触发合成（composite）。

2. 避免过多重排和重绘

频繁修改会触发重排和重绘的属性（如 width、height、margin 等）会导致性能问题。尽量批量修改样式，或者使用 transform 替代位置和大小的改变。

3. 使用 will-change

提前告知浏览器某个元素即将发生变化，有助于浏览器提前优化。

css 复制代码

.element {
  will-change: transform;
}

4. 硬件加速

通过 transform: translateZ(0) 或 transform: translate3d(0,0,0) 触发硬件加速。

css 复制代码

.element {
  transform: translateZ(0);
}

六、浏览器兼容性

1. 前缀问题

早期的浏览器需要添加前缀支持，现在大多数现代浏览器已经不需要了，但为了兼容性，仍然可以添加：

css 复制代码

.element {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

2. 浏览器支持情况

过渡和 2D 变换：IE10+、Chrome、Firefox、Safari、Edge 等现代浏览器均支持
3D 变换：IE10+、Chrome、Firefox、Safari、Edge 等现代浏览器均支持
动画：IE10+、Chrome、Firefox、Safari、Edge 等现代浏览器均支持

七、常见应用场景

1. 悬停效果

按钮缩放
图片放大
导航项高亮

2. 加载动画

旋转加载图标
脉冲效果
骨架屏

3. 交互反馈

表单验证动画
点击波纹效果
拖放反馈

4. 页面过渡

路由切换动画
模态框淡入淡出
滚动视差效果

八、注意事项

1. 性能陷阱

过度使用复杂的动画和变换会导致性能下降，特别是在移动设备上。

2. 无障碍性

确保动画和变换不会影响视力障碍用户的体验，避免闪烁效果（可能引发癫痫）。

3. 兼容性处理

对于不支持某些特性的浏览器，提供降级方案。

4. 代码维护

避免过多的动画和变换导致代码难以维护，保持简洁和一致性。

通过合理使用 CSS 过渡、动画和变换，可以创建出视觉上引人入胜、交互上流畅自然的现代 Web 应用。这些技术不仅提升了用户体验，也为设计师和开发者提供了丰富的创意空间。