Задержка анимации CSS3 до и после с бесконечным циклом - PullRequest
Новая
       24

Задержка анимации CSS3 до и после с бесконечным циклом

0 голосов
/ 03 июля 2018

Я перепробовал много хитростей CSS, но похоже, что ничего не работает, как ожидалось.
Я хочу управлять animation-delays до и после для игры с бесконечным циклом.

Цель состоит в том, чтобы анимировать весь контент с продолжительностью анимации 4/5 с и применить бесконечный цикл.

Вот текущий код из SVG. Для анимации контента я был обязан интегрировать <style> непосредственно в <svg>:

jsfiddle.net / 9bpyewsg

Ниже приведен пример сложной анимации: 

/* mixer */
  .mixermove {animation: mixermove .75s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;}
    @keyframes mixermove {
      0% {opacity:0; transform: translate(108.659574px,500px);}
        100% {opacity:1; transform: translate(108.659574, 64.510638);}
  }

  /* mixer reflection */
  .mixerRmove {animation: 1s mixerRmove both;}
    @keyframes mixerRmove {
      0% {opacity:0; transform: translate(105.977801px,200px);}
        100% {opacity:.25;transform: translate(105.977801, 250.377654);}
  }

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Я нашел решение, надо поиграть с % и keyframes: 

.redmove {animation: 5s redmove ease-in infinite;}
@keyframes redmove {
  0% {
    opacity: 0;
    transform: translate(-100px, 0px);
  }
  30% {
    opacity: 1;
    transform: translate(0.510638px, 90.531915px);
  }
  100% {
    opacity: 1;
    transform: translate(0.510638px, 90.531915px);
  }
}

Первые от 0 до 30% - это анимация, а от 30 до 100% - это "вторая" анимация, и в этом случае блок остается на своей собственной позиции.

0 голосов
/ 03 июля 2018

Просто мысль, Не уверен, поможет ли это. Вы можете использовать событие jquery oAnimationStart и oAnimationEnd 

$('.element').one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // what needs to be done
});
...