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

如何在使用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;   
}

VVV
@关键帧闪烁动画{
从{top:0px；不透明度：0；}
到{top:200px；}
}
@-o关键帧闪烁动画{
从{top:0px；不透明度：0；}
到{top:200px；}
}
@-moz关键帧闪烁动画{
从{top:0px；不透明度：0；}
到{top:200px；}
}
@-webkit关键帧闪烁动画{
从{top:0px；不透明度：0；}
到{top:200px；}
}
.设置闪烁动画{
动画：闪烁动画1s无限交替；
-webkit动画：闪烁动画1s无限交替；
-moz动画：闪烁动画1s无限交替；
-o-动画：闪烁动画1s无限交替；
}

正在工作

您只需要在现有的

css

中的

animate flicker

类中添加一个

position

属性

检查下面的我的代码片段：

@
关键帧闪烁动画{
0 % {
排名：0；
不透明度：0；
}
100 % {
顶部：200px；
不透明度：1；
}
}
@-o-关键帧闪烁动画{
从{
顶部：0px；
不透明度：0；
}
到{
顶部：200px；
}
}
@-moz-关键帧闪烁动画{
从{
顶部：0px；
不透明度：0；
}
到{
顶部：200px；
}
}
@-webkit-关键帧闪烁动画{
从{
顶部：0px；
不透明度：0；
}
到{
顶部：200px；
}
}
.动画-闪烁{
位置：绝对位置；
动画：闪烁动画1s无限交替；-webkit-动画：闪烁动画1s无限交替；-moz-动画：闪烁动画1s无限交替；-o-动画：闪烁动画1s无限交替；
}

VVV

谢谢，但在你的J小提琴上，按钮没有向下移动？我刚刚意识到我也没有设定一个位置，我想那一定是它。但是你的代码没有改变。@尼克：你用的是哪个浏览器？这把小提琴用铬合金做的很好。如果你在其他浏览器中测试它，你可能需要相应地更改css，我只更改了你的css以便在chrome上测试它。啊，是的，它在chrome中可以工作。我在firefox上，但它不起作用。如何使其跨浏览器兼容？它似乎与我这里的东西不兼容：@Nick：检查我最新更新的小提琴，代码是cross broswer兼容的，只需将

position

属性添加到你的

animate flicker

类中，它应该在所有浏览器上都能正常工作。（我自己测试过，在chrome、IE和FF上都能正常工作）@尼克：我的小提琴现在在不同的浏览器上为你工作了吗？