CSS动画与过渡效果详解

什么是CSS动画与过渡？

CSS动画与过渡是CSS3引入的重要特性，它们允许我们创建各种视觉效果，而无需使用JavaScript。过渡效果用于在元素状态变化时创建平滑的动画，而动画则用于创建更复杂、更精细的动画序列。

CSS过渡（Transitions）

1. 基本语法

.element {
  transition: property duration timing-function delay;
}

• property：要过渡的CSS属性（如width、height、color等）
• duration：过渡持续时间（如1s、500ms等）
• timing-function：过渡的缓动函数（如ease、linear、ease-in、ease-out、ease-in-out等）
• delay：过渡开始前的延迟时间（如0s、1s等）

2. 示例

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
}

3. 多属性过渡

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s ease;
}

.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
  border-radius: 50%;
}

CSS动画（Animations）

1. 基本语法

/* 定义动画 */
@keyframes animation-name {
  from { /* 初始状态 */ }
  to { /* 结束状态 */ }
}

/* 或者使用百分比 */
@keyframes animation-name {
  0% { /* 初始状态 */ }
  50% { /* 中间状态 */ }
  100% { /* 结束状态 */ }
}

/* 应用动画 */
.element {
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

• name：动画名称
• duration：动画持续时间
• timing-function：动画的缓动函数
• delay：动画开始前的延迟时间
• iteration-count：动画重复次数（如1、infinite等）
• direction：动画播放方向（如normal、reverse、alternate、alternate-reverse等）
• fill-mode：动画结束后的状态（如none、forwards、backwards、both等）

2. 示例

/* 定义旋转动画 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 应用动画 */
.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

3. 复杂动画示例

@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: red;
  border-radius: 50%;
  animation: bounce 2s ease infinite;
}

高级动画技巧

1. 关键帧动画

使用关键帧可以创建更复杂的动画序列。

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse-button {
  animation: pulse 2s ease-in-out infinite;
}

2. 组合动画

可以将多个动画组合在一起，创建更丰富的效果。

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

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

.element {
  animation: slideIn 0.5s ease forwards, fadeIn 0.5s ease forwards;
}

3. 动画缓动函数

除了预定义的缓动函数，我们还可以使用cubic-bezier创建自定义的缓动函数。

.element {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

动画性能优化

1. 使用GPU加速

使用transform和opacity属性进行动画，因为它们会触发GPU加速，性能更好。

/* 推荐 */
.element {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 不推荐 */
.element {
  transition: width 0.3s ease, height 0.3s ease;
}

2. 避免重排（Reflow）

重排是指浏览器重新计算元素的位置和大小，这会影响动画性能。

• 避免在动画过程中修改布局属性（如width、height、top、left等）
• 使用transform代替这些属性

3. 使用will-change

will-change属性告诉浏览器元素即将发生变化，让浏览器提前做好准备。

.element {
  will-change: transform, opacity;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

4. 合理使用动画

• 不要过度使用动画，避免动画效果过于复杂
• 考虑用户的设备性能，为不同设备提供不同的动画效果
• 在移动设备上，考虑减少动画的复杂度和持续时间

实战应用

1. 悬停效果

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

2. 页面加载动画

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section {
  animation: fadeInUp 0.6s ease-out;
}

/* 为不同元素设置不同的延迟 */
.section h2 {
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.section p {
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.section button {
  animation: fadeInUp 0.6s ease-out 0.6s both;
}

3. 按钮点击效果

.button {
  position: relative;
  overflow: hidden;
}

.button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.button:active::after {
  width: 300px;
  height: 300px;
}

浏览器兼容性

CSS动画与过渡在现代浏览器中得到了广泛支持，包括：

• Chrome 4+
• Firefox 4+
• Safari 4+
• Edge 10+

对于旧浏览器，可以使用JavaScript库（如jQuery）作为降级方案。

总结

CSS动画与过渡是创建视觉效果的强大工具，它们可以使网页更加生动、有趣。通过掌握基本语法和高级技巧，我们可以创建出各种精美的动画效果。

在使用动画时，我们应该注意性能优化，避免过度使用动画，确保动画效果与网站的整体风格一致。

希望本文对你理解和应用CSS动画与过渡有所帮助！