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

Question

Я ищу, чтобы создать веб-анимацию с новой спецификацией и polyfill. Анимация, которую я пытаюсь создать, состоит в том, что элемент перемещается на 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 Fiddle с этим кодом и полифилом: http://jsfiddle.net/Wz8A8/

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

Answer 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'}));