несколько css анимаций на элемент не работают в Chrome

Question

Я пытаюсь оживить .circle элемент. Он должен расти и затем уменьшаться за секунду. Поэтому я объявил 2 css анимации для одного элемента. В Firefox он отлично работает, но в Chrome нет. Can-i-use показывает, что правило animations css в Chrome также должно работать.

Пример Codepen

Полный исходный код:

*,
*::before,
*::after {
  box-sizing: border-box;
}

@keyframes one {
  100% {
    width: 5000px;
    height: 5000px;
  }
}

@keyframes two {
  100% {
    width: 0px;
    height: 0px;
  }
}

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightsalmon;
}

.circle {
  position: absolute;
  height: 0px;
  width: 0px;
  border-radius: 50%;
  background-color: lightgreen;
  /** If declare only one animation, then it will work in Chrome */
  animation: one ease 1s alternate 1 paused, two ease 1s alternate 1 paused;
  animation-fill-mode: forwards;
}

<div class="container">
  <div class="circle"></div>
</div>

<script>
  var circle = document.querySelector(".circle");
  circle.style.animationPlayState = "running, paused";

  setTimeout(() => {
    circle.style.animationPlayState = "paused, running";
  }, 1000);
</script>

Answer 1

Итак, как говорится в одном из комментариев, вы можете сделать это с помощью одной анимации. Вы всегда должны пытаться использовать semanti c, значимые имена при кодировании, поэтому я назвал анимацию grow-shrink, а не просто one.

*,
::before,
::after {
  box-sizing: border-box;
}

@keyframes grow-shrink {
  50% {
    width: 5000px;
    height: 5000px;
  }
}

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightsalmon;
}

.circle {
  position: absolute;
  height: 0;
  width: 0;
  border-radius: 50%;
  background-color: lightgreen;
  animation: grow-shrink 2s;
}

Вам не нужно ничего из JavaScript для этого вам не нужно свойство z-index в .circle. Я изменил вашу продолжительность анимации на 2s, а не 1s, так как она выполняет работу с 1s анимациями, которые у вас были изначально. Начальное значение animation-timing-function уже ease, поэтому я удалил его, потому что оно избыточно. Вам также не нужно было значение alternate.

Если вы указали 1 после alternate в своем значении animation как значение для animation-iteration-count, то это можно безопасно удалить как начальное значение этого свойства уже 1. Если вы имели в виду задержку 1s для запуска анимации роста, а затем еще одну задержку для запуска сжатия и просто забыли юниты, вам нужно будет дать мне знать, и я покажу вам, как это сделать. который. Вы можете легко добавить задержку 1s для запуска анимации, но если вы используете это решение, задержка сжатия должна быть выполнена иначе.

Здесь вы можете увидеть Codepen этого работая .

---

? РЕДАКТИРОВАТЬ: Решение # 2 ?

В качестве альтернативы, если вы хотите увидеть, как это сделать с помощью вашего метода (хотя Я бы не рекомендовал его для этой конкретной анимации), вот код CSS после того, как я получил ваш пример для работы в Chrome (и во всех других основных браузерах):

*,
*::before,
*::after {
  box-sizing: border-box;
}

@keyframes grow {
  0% {
    height: 0;
    width: 0;
  }

  100% {
    height: 5000px;
    width: 5000px;
  }
}

@keyframes shrink {
  0% {
    height: 5000px;
    width: 5000px;
  }

  100% {
    height: 0;
    width: 0;
  }
}

.container {
  align-items: center;
  background-color: lightsalmon;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.circle {
  animation:
    grow 1s ease-in forwards paused,
    shrink 1s ease-out 1s forwards paused;
  background-color: lightgreen;
  border-radius: 50%;
  height: 0;
  position: absolute;
  width: 0;
}

Go здесь, чтобы увидеть CodePen решения № 2, работающего .