transition

This article is extracted from the chat log with AI. Please identify it with caution.

让我详细解释一下 transition 和 transform 的关系：

🔄 transition 和 transform 的关系#

简单来说：

  • transform：定义元素最终变成什么样子（状态）
  • transition：定义如何平滑地过渡到那个状态（过程）

📖 详细解释第一个例子#

.button {
  /* 这行代码的意思是：当 transform 属性发生变化时，用0.3秒的时间平滑过渡，使用 ease 缓动函数 */
  transition: transform 0.3s ease;
  
  /* 初始状态：没有变换 */
  transform: scale(1); /* 实际上这行可以省略，因为默认就是 scale(1) */
}

.button:hover {
  /* 目标状态：放大1.1倍，并向上移动2像素 */
  transform: scale(1.1) translateY(-2px);
}

分解说明：#

1. 初始状态（默认）

.button {
  transform: scale(1); /* 正常大小，没有位移 */
}

2. 鼠标悬停时的目标状态

.button:hover {
  transform: scale(1.1) translateY(-2px); /* 放大并上移 */
}

3. transition 的作用

transition: transform 0.3s ease;
  • 监听属性：transform（当transform属性变化时生效）
  • 持续时间：0.3s（变化过程需要0.3秒）
  • 缓动函数：ease（开始慢→加速→结束慢）

🎬 没有 transition 会怎样？#

如果没有 transition，效果会是这样的：

.button {
  /* 没有 transition */
}

.button:hover {
  transform: scale(1.1) translateY(-2px);
}

结果：鼠标悬停时，按钮会瞬间跳到放大上移的状态，没有任何动画过程。

🔧 transition 语法详解#

transition: [属性] [持续时间] [缓动函数] [延迟时间];

实际参数示例：#

/* 完整写法 */
transition: transform 0.3s ease 0.1s;

/* 等同于： */
transition-property: transform;     /* 监听的属性 */
transition-duration: 0.3s;          /* 持续时间 */
transition-timing-function: ease;   /* 缓动函数 */
transition-delay: 0.1s;             /* 延迟时间 */

🎯 更多 transition 使用方式#

1. 监听多个属性#

.element {
  transition: transform 0.3s ease, opacity 0.5s linear, background-color 0.2s;
}

.element:hover {
  transform: scale(1.1);
  opacity: 0.8;
  background-color: red;
}

2. 监听所有属性#

.element {
  transition: all 0.3s ease; /* 所有属性变化都会有过渡效果 */
}

3. 不同的缓动函数#

.button {
  transition: transform 0.3s ease-in-out;
}

.button2 {
  transition: transform 0.3s linear;
}

.button3 {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

🆚 对比示例#

有过渡 vs 无过渡#

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  padding: 10px 20px;
  background: blue;
  color: white;
  margin: 10px;
  display: inline-block;
}

/* 有过渡效果的按钮 */
.with-transition {
  transition: transform 0.3s ease;
}

/* 无过渡效果的按钮 */
.without-transition {
  /* 没有 transition */
}

/* 共同的悬停效果 */
.button:hover {
  transform: scale(1.2) rotate(5deg);
}
</style>
</head>
<body>
  <div class="button with-transition">有平滑过渡</div>
  <div class="button without-transition">瞬间跳变</div>
</body>
</html>

💡 实际应用场景#

卡片悬停效果#

.card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card:hover {
  transform: translateY(-10px) scale(1.02);
}

加载动画#

.spinner {
  transition: transform 0.6s linear;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

💎 总结#

  • transform：定义元素的变形状态（位置、大小、旋转等）
  • transition：定义属性变化的动画过程（时长、缓动等）
  • 两者关系：transition 让 transform 的变化变得平滑自然

简单类比：

  • transform = 你要去哪里（目的地）
  • transition = 你怎么去那里（坐车、走路、花多长时间）

现在明白了吗？transition 就像是给 transform 变化加上了"慢动作"效果！

本文共 1030 字，创建于 Oct 6, 2025

相关标签： Frontend, CSS, ByAI, Animation

Backward transform translate Forward