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的{{1}}课程中添加animate-flicker属性。

检查下面的代码段：

＆＃13;

css

＆＃13;

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

＆＃13;

希望这有帮助。

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

1 个答案: