Multiple keyframes animations - html

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.