一、transform（变换）详解

transform 是一种静态变换属性，它不会自动产生动画效果，而是直接改变元素的视觉状态。transform可以应用多种变换效果，这些变换可以组合使用。

主要变换类型：

  • translate(x, y) - 平移元素。

  • rotate(deg) - 旋转元素。

  • scale(x, y) - 缩放元素。

  • skew(x-deg, y-deg) - 倾斜元素。

  • perspective(n) - 设置透视效果。

代码示例
/* 基本变换示例 */
.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结合使用来创建平滑过渡。

  • transform变换不影响文档流，不会改变其他元素的布局。

  • transform具有GPU加速的优势，性能较好。

二、transition（过渡）详解

transition 定义了元素从一个状态到另一个状态的平滑过渡过程。它需要一个触发条件（如:hover, :focus等）来启动过渡。

主要属性：

  • transition-property - 指定要过渡的CSS属性。

  • 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需要一个状态变化的触发条件。

  • 只能定义开始和结束两个状态之间的过渡。

  • 当状态变化结束后，动画即停止。

  • 适合简单的交互效果，如按钮悬停、颜色变化等。

 三、animation（动画）详解

animation 是CSS中最强大的动画工具，它允许通过@keyframes定义多个关键帧，创建复杂的动画序列。

主要属性：

  • animation-name - 关键帧名称。

  • 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;
}
关键点

  • animation可以自动播放（不需要触发条件）。

  • 通过@keyframes可以定义任意数量的中间状态。

  • 可以控制动画的重复次数、播放方向等。

  • 适合复杂的、独立的动画效果，如加载动画、循环动画等。

四、三者的协同使用

在实际开发中，这三个属性常常协同工作，特别是animation和transform的结合非常常见。

协同使用示例
@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);
}

五、性能考量

  • transform和opacity 属性的变化可以由GPU加速，性能较好。

  • 避免在动画中改变会触发重排(reflow)的属性，如width、height、margin等。

  • 对于复杂动画，使用will-change属性可以提示浏览器提前优化。

性能优化示例
.smooth-animation {
  transform: translateZ(0); /* 触发GPU加速 */
  will-change: transform, opacity; /* 提示浏览器可能发生的变化 */
  animation: optimizedAnimation 2s ease infinite;
}

总结

  • transform 是改变元素形态的基础工具，本身不产生动画。

  • transition 是连接两个状态的桥梁，创建简单的过渡效果。

  • animation 是完整的动画解决方案，通过关键帧创建复杂动画。

  • 三者结合使用可以创建丰富、流畅的视觉效果，同时保持良好的性能。