Controlling a Set of Keyframes and Their Durations
We have to call the „animate()“ method separately for each individual property we want to change. This means, would we want to manipulate not only the height, but also the width, we have to call „animate()“ again.
In the above example we manipulate the width of the element. The width is intended to change starting from 0, then going to 10 percent and ending at 100 percent, all within a smooth animation process of course. The additional parameter „offset“ defines, how much time each state is supposed to endure. In our example, the animation changing the width from 0 to 10 percent will take up one-third of the time, while the alteration from 10 to 100 percent will get two-thirds. The basis to calculate that is the overall duration of the animation, set by – well – „duration“. In this case, the part will endure one second, and the second part will take up two seconds.
Instead of defining the value in the form of a fraction, you can as well choose to use decimal numbers. The value needs to be in between zero and one, obviously. Correct would also be „0.33“ instead of „1/3“.
More Animation Options
The method „animate()“ is able to steer the motion process just as you are familiar with from the CSS3 property „animation“. That way you are also able to alter the direction as well as the speed of the animation and its acceleration. If you want to define whether to return to the start frame after the animation has ended, do it.
The value „direction“ contains the direction of the animation. Putting it to „reverse“ leads to the animation playing backwards. Using „alternate“ leads to playing the animation forward, then backward. „alternate-reverse“ combines the last two.
Using „easing“ allows you to access the common easing functions already known from CSS3, as there are „ease-in“, „ease-out“ etc. Per default each animation is designed to run linearly without any acceleration and deceleration. The value for „fill“ defines what will be presented after the animation has ended. Per default the starting point will be recalled. Using „forward“ the animation will stop and stay at the last keyframe.
Controlling the Animation
In our example we attach the animation to the variable „animation“, obviously. Then we attach two event listeners to the elements with the IDs „animation_start“ and „animation_pause“. These listeners will care for running the defined functions on click. „play()“ starts die animation, „pause()“ , you know what, and „reverse()“ changes the direction of the animation to backwards. „finish()“ brings you to the last keyframe immediately and stops the animation completely.
What Next? Event-Listener Handles The End of The Animation
In the above example we simply issue a message at animation’s end.
„animate()“ is in its early stages and labeled “experimental”. It will be supported in Chrome from version 36 onwards. If you want to use it now, install Chrome Canary, Chrome’s bleeding edge developer variant.