Использовать веб-анимации для создания правого слайда и постепенного уменьшения анимации отдельных экземпляров

Я ищу создать веб-анимацию с новой спецификацией и полифоном. Анимация, которую я пытаюсь создать, имеет элемент, перемещающий 1024 пикселя вправо вправо и исчезающий. И тогда это все, он не сбрасывается, анимация заканчивается.

Я пытаюсь выполнить это с помощью новой спецификации веб-анимации. Вот полипол на github: https://github.com/web-animations/web-animations-js

Вот код, который я использую для анимации, но он просто угасает элемент, а затем сбрасывается до полной непрозрачности. Он не двигается. И я не хочу, чтобы он сбрасывался, когда это было сделано.

var player = document.timeline.play(new Animation(document.querySelector('.right'), [ {opacity: "1.0", left:0}, {opacity: "0.0", left:"1024px"}], {direction: "forwards", duration: 1000}));

Вот сценарий JS с этим кодом и полифоном: http://jsfiddle.net/Wz8A8/

Обновление. Кажется, что только одно свойство одновременно оживляет. Любые идеи о том, как я могу сделать больше, чем одно свойство? Также возможно просто "до" конечных значений вместо того, чтобы начинать с ключевого кадра, заканчивая только ключевым кадром?

1 ответ

Если вы хотите, чтобы анимация продолжалась до конца, вы хотите дать ей fill 'forwards' (а не 'forward' как говорится в документации в нескольких местах (что уже исправлено).

Получение его для оживления left собственности немного сложно. Если transform: 'translate(...)' работает для вас, который анимируется довольно плавно (потенциальным недостатком является то, что он оказывает очень ограниченное влияние на рендеринг остальной части страницы).

Рабочий пример: http://jsfiddle.net/Wz8A8/6/

var player = document.timeline.play(
 new Animation(document.querySelector('.right'), [ 
 {opacity: "1.0", transform:'translateX(0)'}, 
 {opacity: "0.0", transform:'translateX(100)'}
 ], 
 {direction: "forwards", duration: 1000, fill: 'forwards'}));

licensed under cc by-sa 3.0 with attribution.