Multiple keyframes animations

Question

I want an arrow first to fade-in on my site in 1.5 seconds, and after 3 seconds I want it to do a little bounce movement to indicate a scroll movement. I want to repeat the bounce animation every 3rd second but the fade-in only once (when I reload the page).

My code now:

arrow {
  position: absolute;
  width: 100px;
  top: 85vh;
  animation: arrowInn 1.5s ease-in forwards, arrowBounce 1s 2s ease-in;
}

@keyframes arrowInn{
  from{
    opacity: 0;
  }
  to{
    opacity: 100%;
  }
}

@keyframes arrowBounce {
  0% { bottom: 0px; }
  50% { bottom: 10px; }
  100% { bottom: 0px; }
}

Answer 1

Your code is already working, you just forgot to add infinite on your second animation:

 div { position: absolute; width: 100px; bottom: 10px; animation: arrowInn 1.5s ease-in forwards, arrowBounce 1s 2s infinite ease-in; } @keyframes arrowInn { from { opacity: 0; } to { opacity: 100%; } } @keyframes arrowBounce { 0% { bottom: 10px; } 50% { bottom: 0; } 100% { bottom: 10px; } }

 <div>⬇️</div>

Also, if you want to make it bounce from the bottom you have to set the bottom property instead of the top on your element. I reversed your arrowBounce animation to make it start from 10px instead of 0 , but this part is up to you.