CSS动画三大件：transform、transition和animation用法详解
做网页开发时，想让页面动起来，css提供了三种主要工具：transform、transition和animation。它们各有各的用途，学会用它们能让页面更加生动有趣。
一、transform：改变元素的样子
transform直接改变元素的显示状态，比如移动位置、旋转角度、调整大小。它自己不会产生动画，就是一下子变过去。
主要功能：
translate(x, y) - 移动元素
rotate(deg) - 旋转元素
scale(x, y) - 缩放元素
skew(x-deg, y-deg) - 倾斜元素
代码示例：
/* 基本的变换 */
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.3s ease; /* 加transition才会有动画效果 */
}
/* 鼠标放上去时多种变换一起用 */
.box:hover {
transform: translate(20px, 20px) rotate(45deg) scale(1.2);
}重要特点：
transform自己不会动，需要配合transition或animation才有动画
变换不影响页面其他元素的布局
性能很好，浏览器会尽量用GPU加速
可以多个变换效果一起用，用空格分开
二、transition：让变化平滑过渡
transition让元素的变化有个过程，不会突然变过去。它需要有个触发条件，比如鼠标放上去、点击等。
主要设置：
transition-property - 指定哪个属性要过渡
transition-duration - 过渡持续多长时间
transition-timing-function - 变化速度曲线
transition-delay - 延迟多久开始过渡
代码示例：
/* 简写方式 */
.button {
padding: 10px 20px;
background-color: #2ecc71;
color: white;
border: none;
/* 多个属性一起过渡 */
transition: background-color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.button:hover {
background-color: #27ae60;
transform: translateY(-3px); /* 向上移动 */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}简写语法：
/* 完整的简写：属性 时长 速度曲线 延迟 */
transition: transform 0.5s ease-in-out 0.2s;
/* 多个属性 */
transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;重要特点：
需要触发条件，不会自己动
只能定义开始和结束两个状态
变化结束就停了，不会一直动
适合简单的交互效果，比如按钮变色、菜单展开
三、animation：完整的动画系统
animation是最强大的，可以定义复杂的动画序列，还能自动播放。
主要设置：
animation-name - 动画名字（对应@keyframes的名字）
animation-duration - 动画时长
animation-timing-function - 速度曲线
animation-delay - 延迟时间
animation-iteration-count - 重复次数
animation-direction - 播放方向
animation-fill-mode - 动画结束后的状态
animation-play-state - 播放状态（运行或暂停）
代码示例：
/* 定义关键帧 */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0); /* 在地上 */
}
40% {
transform: translateY(-30px); /* 跳起来 */
}
60% {
transform: translateY(-15px); /* 落下一点 */
}
}
/* 应用动画 */
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
/* 简写：名字 时长 速度曲线 重复次数 */
animation: bounce 2s ease-in-out infinite;
}
/* 更复杂的动画 */
@keyframes pulseRotate {
0% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
50% {
transform: scale(1.2) rotate(180deg);
opacity: 0.8;
}
100% {
transform: scale(1) rotate(360deg);
opacity: 1;
}
}
.loader {
width: 60px;
height: 60px;
border: 4px solid #3498db;
border-radius: 50%;
animation: pulseRotate 2s linear infinite;
}@keyframes的两种写法：
/* 写法一：用百分比 */
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
transform: translateX(20px);
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* 写法二：用from/to */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}重要特点：
可以自动播放，不需要触发条件
能定义任意多个中间状态
可以控制重复次数、播放方向等
适合复杂的动画，比如加载动画、循环特效
四、三个一起用
实际开发中，这三个经常配合使用。
示例：卡片动画
/* 定义复杂的关键帧动画 */
@keyframes slideAndFade {
0% {
opacity: 0;
transform: translateX(-100px) rotate(-10deg);
}
50% {
opacity: 0.8;
transform: translateX(50px) rotate(5deg) scale(1.1);
}
100% {
opacity: 1;
transform: translateX(0) rotate(0) scale(1);
}
}
.card {
width: 200px;
height: 300px;
background-color: #9b59b6;
border-radius: 8px;
padding: 20px;
color: white;
/* 初始状态，加过渡效果 */
transition: all 0.3s ease;
}
/* 进入时的动画 */
.card.animate-in {
animation: slideAndFade 1s ease forwards;
}
/* 鼠标悬停效果 */
.card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}页面加载动画：
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.content {
animation: fadeInUp 0.8s ease-out;
animation-fill-mode: both; /* 保持最后一帧的状态 */
}
/* 延迟不同的元素依次出现 */
.content:nth-child(1) { animation-delay: 0.1s; }
.content:nth-child(2) { animation-delay: 0.3s; }
.content:nth-child(3) { animation-delay: 0.5s; }
</style>
</head>
<body>
<div class="content">第一段内容</div>
<div class="content">第二段内容</div>
<div class="content">第三段内容</div>
</body>
</html>五、性能考虑
动画做不好会让页面变卡。记住这些性能要点：
性能好的属性：
transform（移动、旋转、缩放）
opacity（透明度）
这些属性浏览器会尽量用GPU加速，性能比较好。
性能差的属性：
width、height（宽高变化）
margin、padding（边距变化）
left、top（定位变化）
这些属性变化会导致页面重新计算布局，性能较差。
优化技巧：
/* 触发GPU加速 */
.optimized {
transform: translateZ(0); /* 告诉浏览器用GPU */
}
/* 预知变化，让浏览器提前准备 */
.will-change {
will-change: transform, opacity;
}
/* 动画期间避免布局变化 */
.smooth {
/* 不要这样写：*/
/* animation: widthChange 2s ease; */
/* 要这样写：*/
animation: scaleChange 2s ease;
}
@keyframes scaleChange {
from { transform: scale(0.5); }
to { transform: scale(1); }
}六、实用小技巧
1. 按钮点击效果
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95); /* 点击时稍微缩小 */
}2. 加载动画
@keyframes loading {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.loading-dot {
animation: loading 1.5s infinite;
}
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }3. 平滑滚动锚点
html {
scroll-behavior: smooth; /* 简单实现平滑滚动 */
}
/* 或者用更可控的方式 */
.smooth-scroll {
transition: transform 0.5s ease-out;
}七、浏览器兼容性
现在主流的浏览器都支持这些属性。如果需要支持很老的浏览器，可以加浏览器前缀：
.box {
-webkit-transform: translateX(100px); /* Chrome, Safari */
-moz-transform: translateX(100px); /* Firefox */
-ms-transform: translateX(100px); /* IE 9 */
transform: translateX(100px);
}不过现在大部分情况下，直接写标准属性就可以了。
总结
transform：改变元素样子，不会动，性能好
transition：让变化有过渡，需要触发条件，适合简单交互
animation：完整的动画系统，能定义复杂动画，可以自动播放
简单效果用transition，复杂动画用animation，改变样子用transform。三个配合使用，能做出各种好看的效果。记住性能要点：多用transform和opacity，少改宽高和定位。先从简单的效果开始练习，慢慢尝试更复杂的动画。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
