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

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.