如何为元素hover状态创建平滑的CSS过渡动画效果？

要实现流畅的hover过渡，关键是把transition属性加在元素的默认状态上，而不是仅在:hover伪类里定义。这样元素在默认和hover状态之间的属性变化会自动应用过渡动画。

基础示例：背景色与文字颜色过渡 #

/* 给元素默认状态添加transition规则 */
.btn {
  padding: 10px 20px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  /* 指定要过渡的属性、时长、缓动函数 */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
  background-color: #1d4ed8;
  color: #f3f4f6;
}

进阶示例：变换组合过渡 #

比如同时实现缩放+位移+阴影变化的效果，同样把transition加在默认状态：

.card {
  width: 200px;
  height: 250px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* 过渡transform和box-shadow属性 */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

常见错误排查 #

• 错误写法：仅在:hover里添加transition

  /* 这样不会生效，因为默认状态没有过渡规则，浏览器无法识别变化过程 */
  .btn:hover {
    background-color: #1d4ed8;
    transition: background-color 0.3s ease;
  }
  

• 正确逻辑：必须在元素的基础样式中声明transition，让浏览器监听指定属性的变化并应用过渡动画。

通用优化技巧 #

• 避免使用transition: all 0.3s ease：虽然能让所有可过渡属性生效，但复杂元素会增加性能开销，建议明确指定需要过渡的属性（如background-color、transform）。
• 自定义缓动函数：用cubic-bezier()可以调整动画节奏，比如cubic-bezier(0.34, 1.56, 0.64, 1)能做出带弹性的先快后慢效果，适合卡片类元素的hover动效。

内容的提问来源于stack exchange，提问作者Ravi Kumar