CSS @keyframes 动画：颜色变化、背景旋转与放大缩小

在CSS中，@keyframes 是一个强大的工具，它允许我们创建复杂的动画效果。今天，我们将一起探索如何使用 @keyframes 来实现颜色变化、背景旋转以及放大缩小的动画效果。

动画会在 2 秒内循环播放，并在不同的时间点改变盒子的背景颜色和变换（旋转和缩放）。

在 0% 的时间点，盒子的背景颜色是绿色（#4CAF50），没有进行旋转和缩放。
在 25% 的时间点，盒子的背景颜色变为红色（#F44336），同时旋转了 90 度并放大了 10%。
在 50% 的时间点，盒子的背景颜色变为绿色（#0F9D58），旋转了 180 度并回到了初始大小。
在 75% 的时间点，盒子的背景颜色变为蓝色（#00BCD4），旋转了 270 度并再次放大了 10%。
在 100% 的时间点（也就是动画结束时），盒子的背景颜色回到了初始的绿色（#4CAF50），旋转了 360 度（即回到初始位置）并回到了初始大小。

一、HTML 结构

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>使用 @keyframes 创建动画</title>  
<style>  /* CSS 样式和关键帧定义将放在这里 */  
</style>  
</head>  
<body>  <div class="animated-box"></div>  </body>  
</html>

二、CSS 样式与 `@keyframes` 动画

<style>  .animated-box {  width: 100px;  height: 100px;  background-color: #4CAF50;  border-radius: 50%; /* 圆形盒子 */  margin: 50px auto; /* 居中显示 */  animation: colorRotateScale 2s infinite linear; /* 应用动画 */  }  /* 定义关键帧动画 */  @keyframes colorRotateScale {  0% {  background-color: #4CAF50; /* 初始颜色 */  transform: rotate(0deg) scale(1); /* 初始旋转角度和大小 */  }  25% {  background-color: #F44336; /* 颜色变化 */  transform: rotate(90deg) scale(1.1); /* 旋转90度并放大 */  }  50% {  background-color: #0F9D58; /* 颜色变化 */  transform: rotate(180deg) scale(1); /* 旋转180度并回到初始大小 */  }  75% {  background-color: #00BCD4; /* 颜色变化 */  transform: rotate(270deg) scale(1.1); /* 旋转270度并放大 */  }  100% {  background-color: #4CAF50; /* 回到初始颜色 */  transform: rotate(360deg) scale(1); /* 旋转360度并回到初始大小 */  }  }  
</style>

在这个CSS样式中，我们定义了一个名为 colorRotateScale 的 @keyframes 动画。这个动画会在 2 秒内完成一个循环，并且会无限次地重复（infinite）。我们使用 linear 动画缓动函数，确保动画在整个周期内的速度是均匀的。

动画的效果包括：

颜色变化：从绿色（#4CAF50）到红色（#F44336），再到绿色（#0F9D58），最后到蓝色（#00BCD4），并最终回到绿色（#4CAF50）。
背景旋转：从 0 度开始，每过 25% 的时间，就旋转 90 度，直到完成 360 度的旋转。
放大缩小：在动画过程中，盒子会在旋转 90 度和 270 度时稍微放大（1.1 倍），而在其他时间点则保持原始大小。

完整例程

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Keyframe Animation Example</title>  
<style>  .animated-box {  width: 100px;  height: 100px;  background-color: #4CAF50;  border-radius: 50%; /* 圆形盒子 */  margin: 50px auto; /* 居中显示 */  animation: colorRotateScale 2s infinite; /* 应用动画 */  }  /* 定义关键帧动画 */  @keyframes colorRotateScale {  0% {  background-color: #4CAF50; /* 初始颜色 */  transform: rotate(0deg) scale(1); /* 初始旋转角度和大小 */  }  25% {  background-color: #F44336; /* 颜色变化 */  transform: rotate(90deg) scale(1.1); /* 旋转90度并放大 */  }  50% {  background-color: #0F9D58; /* 颜色变化 */  transform: rotate(180deg) scale(1); /* 旋转180度并回到初始大小 */  }  75% {  background-color: #00BCD4; /* 颜色变化 */  transform: rotate(270deg) scale(1.1); /* 旋转270度并放大 */  }  100% {  background-color: #4CAF50; /* 回到初始颜色 */  transform: rotate(360deg) scale(1); /* 旋转360度并回到初始大小 */  }  }  
</style> 
</head>  
<body>  <div class="animated-box"></div>  </body>  
</html>