如何在向下移动css动画时进行淡入/淡出

Question

如何在使用 css 动画向下移动时使按钮在循环中淡入/淡出？到目前为止，我的淡入/淡出工作正常。但我不能让他们同时工作。

<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

工作JSFiddle。

您只需将position 属性添加到现有css 中的animate-flicker 类。

在下面检查我的代码 sn-p：

@
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>

希望这会有所帮助。