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

I'm a novice and in the process of creating a site in HTML and CSS. My problem is that I put an animation scrolling an image to infinity behind a transparent text (not completely transparent) but I would also like to have the possibility of making this text rainbow. These two animations work perfectly independently but once I put them in the same code, the background image remains static, the text is no longer centered but on the left, and the rainbow text works well. So I would like some help to get everything working properly at the same time.

The 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 >
      <h1>test</h1>
    </div>
  </body>
</html>

CodePudding user response：

Yes, it's impossible, you are overriding the animation property. You can try one of two things:

Use the color animation on the text-container
Combine the animations into one

CodePudding user response：

Like Konrad says, you could combine animations, I made this snippet with your code:

.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 >
      <h1>test</h1>
    </div>
  </body>
</html>