时间戳

首页 > 解决方案 > 边缘闪烁中的 CSS 关键帧动画

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

问题描述

我正在尝试一些 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;
  }
}

这是我创建的代码笔： https ://codepen.io/anon/pen/BqqMKe

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

标签： csscss-animationskeyframecodepen

解决方案

推荐阅读