Now let's code some animation out! In the 'Try It Yourself' block, you should see a default div block with class named 'test' and ID named 'a' coloured in red. If you don't like the colour, you can always change it around. Click on 'Update' when you have finished typing in your code.
Now we want to make the red rounded rectangle move to 300px from left for 2 seconds. We should do the following:
new Animation(document.querySelector("#a"), {left:
"300px"}, 2);
new Animation(document.querySelector("#a"), {left: "300px"}, 2);
'new Animation()'
creates a new animation object.'document.querySelector("#a")'
is a DOM method which
gets the element with id equals to 'a' from the HTML file. You
can always use 'document.getElementById("a")'
which
would result the same thing. Since we have defined its class
name as well, we can also select it using
'document.querySelector(".test")'.
'{left: "300px"}'
is the effects of the animation.
In this case we are letting it move to 300px from left.'2'
will set the duration of the animation to
2 seconds. The bigger the number, the slower the animation
speed and vice versa.