CSS 如何使用关键帧动画分别对多个CSS变换属性进行动画

在本文中，我们将介绍如何使用关键帧动画分别对多个CSS变换属性进行动画。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是关键帧动画？

关键帧动画是CSS中一种强大的动画方式。通过在动画的不同关键帧上定义变换属性的值，我们可以创建平滑且复杂的动画效果。在关键帧动画中，我们可以指定不同变换属性的起始值和结束值，然后浏览器会在关键帧之间平滑地过渡属性的值。

如何分别对多个CSS变换属性进行动画？

在CSS中，我们可以使用@keyframes关键字来定义关键帧动画。我们需要为每个变换属性创建一个新的关键帧动画，并将它们分别进行命名。接下来，我们可以通过在选择器中使用animation属性，并指定不同的动画名称和持续时间来将这些关键帧动画应用到元素上。让我们来看一个例子：

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  animation: rotate 2s, scale 3s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

在上面的例子中，我们为旋转和缩放两个变换属性分别创建了关键帧动画。我们将旋转的动画命名为rotate，缩放的动画命名为scale。然后，我们通过在元素的选择器中使用animation属性将这两个动画应用到元素上。由于我们指定了不同的持续时间（2秒和3秒），所以这两个动画将分别以不同的速度进行。

示例：分别对多个CSS变换属性进行动画

让我们通过一个示例来演示如何分别对多个CSS变换属性进行动画。假设我们有一个带有背景颜色和边框的方形块元素，我们希望在一段时间内将其旋转并放大。我们可以通过关键帧动画来实现这一效果。让我们看看代码示例：

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  border: 2px solid black;
  animation: rotate 2s infinite, scale 3s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

在上面的代码中，我们使用了一个蓝色背景和一个黑色边框的方形块元素。我们为旋转和缩放两个变换属性分别创建了关键帧动画，并应用到了元素上。还指定了无限循环的动画效果，通过使用infinite关键字。

当我们在浏览器中运行这段代码时，方形块将无限循环地旋转和放大，从而创建了一个有趣的动画效果。

总结

通过使用关键帧动画，我们可以轻松地对多个CSS变换属性分别进行动画。只需要为每个属性创建一个新的关键帧动画，并在选择器中使用animation属性将其应用到元素上。我们可以通过指定不同的动画名称和持续时间来为每个属性定义自己的动画效果。希望本文对你理解如何使用关键帧动画分别对多个CSS变换属性进行动画有所帮助！