如何在向下移动 css 动画时做淡入淡出 in/out

Question

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

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

您只需在现有 css.

中向 animate-flicker class 添加 position 属性

检查下面我的代码片段：

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

希望这对您有所帮助。

如何在向下移动 css 动画时做淡入淡出 in/out

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

css

animation

fading

css-animations