尝试在相同元素上设置2个动画

在相同元素上设置两个动画是通过使用CSS的@keyframes规则和animation属性来实现的。@keyframes规则定义了动画的关键帧，而animation属性指定了动画的名称、持续时间、延迟时间、重复次数等属性。

下面是一个示例代码，演示如何在相同元素上设置两个动画：

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes animation1 {
  0% { background-color: red; }
  50% { background-color: yellow; }
  100% { background-color: red; }
}

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

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation1, animation2;
  animation-duration: 4s, 2s;
  animation-delay: 0s, 2s;
  animation-iteration-count: infinite, infinite;
  animation-timing-function: linear, ease-in-out;
}
</style>
</head>
<body>

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

</body>
</html>

在上面的代码中，我们定义了两个动画：animation1和animation2。animation1使元素的背景颜色在红色和黄色之间循环变化，animation2使元素以顺时针方向旋转360度。通过将animation-name属性设置为"animation1, animation2"，我们可以同时应用这两个动画到相同的元素上。

其他属性如animation-duration、animation-delay、animation-iteration-count和animation-timing-function可以根据需要进行调整，以控制动画的持续时间、延迟时间、重复次数和动画速度。

这种在相同元素上设置多个动画的技术可以应用于各种场景，例如制作复杂的动画效果、实现交互式的用户界面等。

腾讯云相关产品和产品介绍链接地址：