how make another transform animation after fade-in and existing transform?

Question

hello I have a text which has fade-in and transform(translate) animation so after the fade-in and transform animation I want a moving text like up and down a lite, not too much in an infinite loop like you are waiting for loading of something

 .imgContaner { width: 100%; height: 86.6vh; background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/85/Sky-3.jpg"); background-size: cover; background-repeat: no-repeat; position: relative; overflow: hidden; }.imgContaner p { color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; text-align: center; text-shadow: -1px 0 #000000, 1px 0 #000000, 0 1px #000000, 0 -1px #000000; animation: 4s ease-in-out test; opacity: 1; } @keyframes test { from { transform: translate(-50%, 400%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }

 <div className={classes.imgContaner}> <p>Make Your Dreams Come True</p> </div>

Blockquote

Answer 1

You can do this in two ways with css. First way: Add more frames in your @keyframes definition. Instead of using from and to properties, use percentages. For example:

@keyframes test {
  0% {   
    transform: translate(-50% , 400%);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%);
    opacity: 1;  
  }
  75% {
    Do other stuff...
  }
  100% {
    Do other stuff...
  }
}

Second way: Chain animations to play after the other one. By adding delay to the second animation equal to the duration of first animation. Like:

animation: test 4s ease-in-out, otherAnim 2s ease-in-out 4s;

Note that you can't do it this way:

animation: test 4s ease-in-out;
animation: otherAnim 2s ease-in-out 4s;

This way first one will be overwriten by second one. Which is not what you want.