CSS3如何实现动画组合效果

在CSS3中，可以通过使用关键帧动画（@keyframes）、动画属性（animation）和动画组合属性（animation-composition）来实现动画组合效果。以下是一个简单的示例，展示了如何将两个动画组合在一起：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 Animation Composition</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS (styles.css):

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: move, changeColor;
  animation-duration: 2s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, alternate-reverse;
  animation-fill-mode: forwards, backwards;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(300px);
  }
}

@keyframes changeColor {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

在这个示例中，我们创建了一个名为.box的div元素，并为其应用了两个动画：move和changeColor。这两个动画分别控制元素的位移和颜色变化。

我们通过animation-name属性将这两个动画组合在一起。animation-duration属性分别设置了两个动画的持续时间。animation-timing-function属性设置了动画的速度曲线。animation-iteration-count属性设置了动画的迭代次数。animation-direction属性设置了动画的方向。animation-fill-mode属性设置了动画结束后元素的状态。

通过这种方式，你可以将多个动画组合在一起，实现复杂的动画效果。你可以根据需要调整动画属性，以获得所需的效果。