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

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

一、CSS 过渡（Transitions）

1. 基本概念

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

2. 核心属性

transition-property

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

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

transition-duration

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

.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)：自定义贝塞尔曲线

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

transition-delay

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

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

3. 简写语法

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

4. 触发方式

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

:hover 伪类

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

:focus 伪类

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

JavaScript 动态修改

<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 规则

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

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

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

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

3. 动画属性

animation-name

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

.element {animation-name: fadeIn;
}

animation-duration

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

.element {animation-duration: 2s;
}

animation-timing-function

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

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

animation-delay

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

.element {animation-delay: 0.5s;
}

animation-iteration-count

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

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

animation-direction

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

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

.element {animation-direction: alternate;
}

animation-fill-mode

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

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

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

animation-play-state

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

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

4. 简写语法

.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 方向的偏移量。

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

rotate()

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

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

scale()

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

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

skew()

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

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

matrix()

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

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

3. 3D 变换

translate3d()

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

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

rotate3d()

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

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

scale3d()

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

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

perspective()

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

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

transform-style

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

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

backface-visibility

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

.card {backface-visibility: hidden;
}

4. 变换原点

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

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

四、综合应用

1. 过渡与变换结合

.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. 动画与变换结合

@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 卡片翻转效果

.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

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

.element {will-change: transform;
}

4. 硬件加速

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

.element {transform: translateZ(0);
}

六、浏览器兼容性

1. 前缀问题

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

.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 应用。这些技术不仅提升了用户体验，也为设计师和开发者提供了丰富的创意空间。