Question

我正在尝试在CSS中使用某些关键帧动画，由于某些原因，这些动画在IE，Chrome，Firefox中似乎可以正常工作，但在Microsoft Edge中却不能。我在动画的末尾看到了这种闪烁，我猜想它显示了它们的最终位置，并在再次隐藏它们并重新启动动画之前将不透明度设置为1。我的代码如下（这对于一个气泡来说是最小的，但是下面的链接是整个动画的代码笔）：

HTML：

<div class="canvas">
  <div class="bubble"></div>
</div>

CSS：

.canvas { 
  min-height: 100%;
  width: 100%;
  background: green;
  position: absolute;
  overflow: hidden;
}
.bubble {
  display: block;
  border-radius: 100%;
  opacity: 0.8;
  position: absolute;
}
.bubble:nth-child(1) {
  background: radial-gradient(ellipse at center, #E6EBF2 0%, #E6EBF2 46%, #EFF0EC 100%);
  width: 7px;
  height: 7px;
  left: 13vw;
  bottom: 52vh;
  -webkit-animation: move1 infinite 10s;
          animation: move1 infinite 10s;
}
@-webkit-keyframes move1 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 44vh;
    -webkit-transform: translate(10px, 0);
            transform: translate(10px, 0);
    opacity: 0;
  }
}
@keyframes move1 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 44vh;
    -webkit-transform: translate(10px, 0);
            transform: translate(10px, 0);
    opacity: 0;
  }
}

这是我创建的一个Codepen： https://codepen.io/anon/pen/BqqMKe

任何帮助将不胜感激，因为我似乎无法弄清楚。

边缘闪烁中的CSS关键帧动画

0 个答案: