Как сделать НЕ параллельную сменяемость анимаций в css?

Question

Как сделать так, чтобы после завершения одной анимации, НЕ параллельно начиналась другая? (затем чтобы все повторялось)

Answer 1

Поигрался с CSS'ом, понял что без старого доброго JS никак, анимацию можно задержать конечно, но только один раз, в итоге анимации синхронизируются и начинают работать вместе, тут пример такой проблемы:

#anim1, #anim2 {
  width: 50px;
  height: 50px;
  outline: 1px solid black;
}

#anim1 {
  animation: anim 3s infinite both;
}

#anim2 {
  animation: anim 3s /* <-- Время анимации */ 3s /* <-- Задержка */ infinite both;
}

@keyframes anim {
  0% {
    background: red;
  }

  50% {
    background: blue;
  }

  100% {
    background: red;
  }
}

<div id="anim1"></div>
<div id="anim2"></div>

Но мы ведь не ограничены одним CSS'ом, можно и JavaScript воспользоваться, тут пример как я реализовать в JavaScript:

let anim1 = document.querySelector('#anim1')
let anim2 = document.querySelector('#anim2')

class AnimationAutoChangeState {
  constructor(elem1, elem2) {
    this.elem1 = elem1
    this.elem2 = elem2
  }

  init() {
    let elem1 = this.elem1
    let elem2 = this.elem2

    elem2.style.animationPlayState = 'paused'

    for (let i = 0; i < 2; i++) {
      let els = getElements(elem1, elem2, i)

      addListener(els.el1, els.el2)
    }

    function getElements(element1, element2, index) {
      return index === 0 ? {
        el1: elem1,
        el2: elem2,
      } : {
        el1: elem2,
        el2: elem1,
      }
    }

    function addListener(element1, element2) {
      let animationName = 'animationPlayState'

      element1.addEventListener('animationiteration', () => {
        element1.style[animationName] = 'paused'
        element2.style[animationName] = 'running'
      })
    }
  }
}

new AnimationAutoChangeState(anim1, anim2)
  .init()

#anim1, #anim2 {
  width: 50px;
  height: 50px;
  outline: 1px solid black;
}

#anim1 {
  animation: anim 3s infinite both;
}

#anim2 {
  animation: anim 3s infinite both;
}

@keyframes anim {
  0% {
    background: red;
  }

  50% {
    background: blue;
  }

  100% {
    background: red;
  }
}

<div id="anim1"></div>
<div id="anim2"></div>

Объяснение

Я воспользовался событием animationiteration, чтобы оно сработало нужно чтобы элемент постоянно воспроизводил анимацию бесконечно (нужно либо в animation добавить infinite, либо создать пропорцию animation-iteration-count со значением infinite), так что убедитесь что у вас анимация воспроизводится бесконечно. Я создал класс AnimationAutoChangeState, в конструктор идёт два аргумента, первый elem1, второй elem2. У второго элемента сразу отключается воспроизведение анимации, и дальше добавляется событие animationiteration элементам. При окончании итерации анимации у первого элемента, у второго элемента она начинает воспроизводиться, а у первого наоборот останавливается, точно также всё происходит у второго элемента, только элементы изменены местами.

БЛОГ НА HUSL

Как сделать НЕ параллельную сменяемость анимаций в css?

Ответы (1 шт):

Объяснение