2

I'm looking to create a web animation with the new spec and polyfill. The animation I am trying to create is have an element move 1024 px to right right and fade out. And then that is it, it doesn't reset, the animation just ends.

I'm trying to accomplish this with the new Web Animations Spec. Here is the polyfill on github: https://github.com/web-animations/web-animations-js

Here is the code that I am using for the animation, but it just fades the item out and then resets to full opacity. It doesn't move. And I don't want it to reset when it is done.

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

Here is a JS Fiddle with that code and the polyfill: http://jsfiddle.net/Wz8A8/

Update: It seems as if it is only taking one property to animate at a time. Any ideas on how I can do more than one property? Also is it possible to just do ' to ' the end values instead of starting from a keyframe, just ending at a keyframe?

wordSmith
  • 2,993
  • 8
  • 29
  • 50

1 Answers1

2

If you want the animation to continue past the end then you want to give it a fill of 'forwards' (not 'forward' as the documentation says in a few places (which has been fixed by now).

Getting it to animate the left property is a bit tricky. If transform: 'translate(...)' works for you, that animates quite smoothly (the potential downside is that it has very limited effect on the rendering of the rest of the page).

Working example: 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'}));
jpoppe
  • 2,228
  • 24
  • 25
Peter Burns
  • 44,401
  • 7
  • 38
  • 56
  • 1
    Thank you very much! Why did you use translate instead of left? I found out that individually, when alone, left works fine. But when with another property, it doesn't work. – wordSmith Jun 24 '14 at 01:49
  • 1
    Is there a performance difference if you use "translate3d" insted of translateX? – Matěj Kříž Oct 04 '14 at 12:38