不可能同时在 CSS 中放入两个动画？

Question

我是新手，正在 HTML 和 CSS 中创建网站。我的问题是我在透明文本（不是完全透明）后面放置了一个将图像滚动到无限远的动画，但我也希望有可能使该文本成为彩虹。这两个动画完美地独立工作，但一旦我将它们放在相同的代码中，背景图像保持静态，文本不再居中而是在左侧，彩虹文本效果很好。所以我需要一些帮助，让所有的东西同时正常工作。

HTML :

body {
  margin: 0;
  font-family: arial;
  padding: 0;
  background-color: black;
}

.text-container h1{
  font-size: 120px;
  color: rgba(255,255,255,.1);
  background-image: url("Images/istockphoto-922764830-612x612.jpg");
  background-size: 300px;
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  animation: animate1 20s linear infinite;
  animation: animate2 6s linear 0s infinite;
}

@keyframes animate1 {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

@keyframes animate2 {
  from {
    color: rgba(102,102,255,.1);
  }
  10% {
    color: rgba(0,153,255,.1);
  }
  50% {
    color: rgba(0,255,0,.1);
  }
  75% {
    color: rgba(255,51,153,.1);
  }
  100% {
    color: rgba(102,102,255,.1);
}

.text-container {
  margin-top: 0%;
  text-align: center;
}

<html>
  <head>
    <link rel="stylesheet" href="test.css">
  </head>
  <body>
    <div class="text-container">
      <h1>test</h1>
    </div>
  </body>
</html>

Answer 1

是的，这不可能，您正在覆盖 animation 属性。您可以尝试以下两种方法之一：

在text-container
将动画合二为一

Answer 2

就像康拉德说的，你可以结合动画，我用你的代码做了这个片段：

.text-container h1{
  font-size: 120px;
  color: rgba(255,255,255,.1);
 background-image: url("http://placekitten.com/400/400");
  background-size: 300px;
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  animation: animate1 20s linear infinite;

}

@keyframes animate1{
      from {
        color: rgba(102,102,255,.1);
        background-position: 0 0;
      }
      10% {
        color: rgba(0,153,255,.1);
      }
      25%{
       background-position: 100% 0; 
      }
      50% {
        color: rgba(0,255,0,.1);
        background-position: 0 0;       
      }
      75% {
        color: rgba(255,51,153,.1);
        background-position: 100% 0;        
      }
      100% {
        color: rgba(102,102,255,.1);
        background-position: 0 0;
      }
    }
.text-container {
  margin-top: 0%;
  text-align: center;
}

<html>
  <head>
    <link rel="stylesheet" href="test.css">
  </head>
  <body>
    <div class="text-container">
      <h1>test</h1>
    </div>
  </body>
</html>

不可能同时在 CSS 中放入两个动画？

Impossible to put two animations in CSS at the same time?

html

css

css-animations