CSS анимация повторяется только 3 раза, затем останавливается

Question

У меня есть самолет, на который я хочу лететь назад и четвертый бесконечно. У меня есть Javascript слушатель для animationend, который работает очень хорошо (я думаю). Он летит вправо, влево, вправо, а затем останавливается и сбрасывается в исходное положение. Когда слушатель срабатывает, я просто переключаю классы, которые связаны с желаемой анимацией.

Вот Javascript:

var runway = document.getElementById("myNavbar");

var plane = document.createElement('div');
plane.id = "plane";
plane.className = "plane-right";

runway.appendChild(plane);

$("#plane").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
    if (plane.className == "plane-right")
    {
        plane.className = "plane-left";
    }
    else
    {
        plane.className = "plane-right";
    }
});

Я также понимаю, что есть функция jQuery toggle(), но я не могу заставить ее работать. Я попытался $("#plane").toggle(".plane-right, .plane-left") внутри слушателя, но это не помогло.

И CSS class

.plane-right {
    background-image: url("../img/zoomzoom.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 50px;
    width: 100px;
    animation-name: moveLeftToRight;
    animation-duration: 10s;
    position: relative;
    animation-timing-function: linear;
    pointer-events: none;
}
.plane-left {
    background-image: url("../img/zoomzoom.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 50px;
    width: 100px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    animation-name: moveRightToLeft;
    animation-duration: 10s;
    position: relative;
    animation-timing-function: linear;
    pointer-events: none;
}

@keyframes moveLeftToRight {
  from   { left: -20%; }
  to { left: 110%; }
}
@keyframes moveRightToLeft {
  from   { left: 110%; }
  to { left: -20%; }
}

Обновление: я добавил alert() к слушателю, и предупреждение не срабатывает в последний раз, когда анимация заканчивается до того, как самолет сбрасывает положение. Не уверен, что это важно или полезно, но это так.

Answer 1

Используйте «вкл» вместо «один». Использование «one» срабатывает только один раз, хотя в этом случае дважды, и я не уверен на 100%, почему. Это может быть несколько типов событий (webkitanimationend AND animationend), но я думаю, что они будут происходить одно за другим.

https://jsfiddle.net/ftgr6h1e/

$("#plane").on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){

Теперь, в общем, анимация позиции медленная. Попробуйте вместо этого анимировать transform3D, чтобы использовать графический процессор для перерисовки вашей плоскости.