API веб-анимации - переменная продолжительность анимации?

Question

Я экспериментирую с API веб-анимаций, который в настоящее время работает только в браузерах Webkit. Как можно себе представить, что документация немного скудны:

• Here's a blog post I found on it
• Here's the spec

Я пытаюсь сделать две вещи:

• Инвертировать анимацию в случайной момент времени до окончания анимации.
• Ошеломляйте длительность эффектов в анимации. Например, для 3-секундной анимации первая часть должна быть 1,25 с, а вторая часть - 1,75 с.

Вот рабочий пример, который использует API веб-анимации. Я обеспокоен тем, что 3 анимации распределены равномерно за 3 секунды. Как я могу поместить их по-другому, не создавая экземпляры нескольких объектов animPlayer?

$('.box').click(function() { 
 
    var animationPlayer = this.animate([{ 
 
    transform: 'translateX(0px)' 
 
    }, { 
 
    transform: 'translateX(600px)' 
 
    }, { 
 
    transform: 'translate(600px, 200px)' 
 
    }], 3000); 
 

 
    animationPlayer.onfinish = function(e) { 
 
    console.log('complete!'); 
 
    } 
 

 
    // wiggle wiggle wiggle 
 
    setTimeout(function() { 
 
    animationPlayer.reverse(); 
 
    setTimeout(function() { 
 
     animationPlayer.reverse(); 
 
    }, 250); 
 
    }, 750); 
 
});

.box { 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box'></div>

Answer 1

О ваш первый вопрос, похоже, реализация Chrome до сих пор не обратная функция. Это согласуется с документацией, которую вы связали. Может быть, в Канарских островах, но я не проверял.

Исправление: чтение обновления в связанном блоге, похоже, что оно было добавлено в Chrome. Однако, это не работает для меня ...

О втором вопросе, указать смещение в вашем втором ключевом кадре

Если первое преобразование должны работать в течение 1,25 с, в общей сложности 3 с, это в 1,25/3 = 0,416, так

$('.box').click(function() { 
 
    var animationPlayer = this.animate([{ 
 
    transform: 'translateX(0px)' 
 
    }, { 
 
    transform: 'translateX(600px)', offset: 0.416 
 
    }, { 
 
    transform: 'translate(600px, 200px)' 
 
    }], 3000); 
 

 
    animationPlayer.onfinish = function(e) { 
 
    console.log('complete!'); 
 
    } 
 

 
    // wiggle wiggle wiggle 
 
    setTimeout(function() { 
 
    animationPlayer.reverse(); 
 
    setTimeout(function() { 
 
     animationPlayer.reverse(); 
 
    }, 250); 
 
    }, 750); 
 
});

.box { 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box'></div>