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

Question

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

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

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

http://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);}
  }

Answer 1

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

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

Answer 2

Я нашел решение, мы должны играть с % а также 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% - это "вторая" анимация, и в этом случае блок остается на своей собственной позиции.