how to do a fade in/out while moving down css animation
<p>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. </p>

<pre><code>&lt;div class="down-arrow"&gt;&lt;button class="down-button animate-flicker" type="button"&gt;VVV&lt;/button&gt;&lt;/div&gt;

@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;   
}
</code></pre>

<p><a href="https://jsfiddle.net/ywn9w5L9/3/" rel="nofollow">https://jsfiddle.net/ywn9w5L9/3/</a></p>