CSS ключевые анимации в мерцании краев - PullRequest
Новая
       83

CSS ключевые анимации в мерцании краев

0 голосов
/ 24 октября 2018

Я экспериментирую с некоторыми анимациями ключевых кадров в 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

Любая помощь будет оценена, поскольку я не могу понять это.

...