how to do a fade in/out while moving down css animation - css

Question

How can I make a button fade in/out on a loop while moving down with css animations? so far I got the fade in/out working fine. But I cant get them both to work at the same time.
<div class="down-arrow"><button class="down-button animate-flicker" type="button">VVV</button></div>
#keyframes flickerAnimation {
from {top:0px; opacity: 0; }
to {top:200px;}
}
#-o-keyframes flickerAnimation {
from {top:0px; opacity: 0; }
to {top:200px;}
}
#-moz-keyframes flickerAnimation {
from {top:0px; opacity: 0; }
to {top:200px;}
}
#-webkit-keyframes flickerAnimation {
from {top:0px; opacity: 0; }
to {top:200px;}
}
.animate-flicker {
animation: flickerAnimation 1s infinite alternate;
-webkit-animation: flickerAnimation 1s infinite alternate;
-moz-animation: flickerAnimation 1s infinite alternate;
-o-animation: flickerAnimation 1s infinite alternate;
}
https://jsfiddle.net/ywn9w5L9/3/

Answer 1

Working JSFiddle.
You just need to add a position attribute to your animate-flicker class in your existing css.
Check my code snippet below :
#
keyframes flickerAnimation {
0 % {
top: 0;
opacity: 0;
}
100 % {
top: 200px;
opacity: 1;
}
}
# - o - keyframes flickerAnimation {
from {
top: 0px;
opacity: 0;
}
to {
top: 200px;
}
}
# - moz - keyframes flickerAnimation {
from {
top: 0px;
opacity: 0;
}
to {
top: 200px;
}
}
# - webkit - keyframes flickerAnimation {
from {
top: 0px;
opacity: 0;
}
to {
top: 200px;
}
}
.animate - flicker {
position: absolute;
animation: flickerAnimation 1s infinite alternate; - webkit - animation: flickerAnimation 1s infinite alternate; - moz - animation: flickerAnimation 1s infinite alternate; - o - animation: flickerAnimation 1s infinite alternate;
}
<div class="down-arrow">
<button class="down-button animate-flicker" type="button">VVV</button>
</div>
Hope this helps.