1
Create a new basic animation
Exercise 1 - Moving Right

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);`
Show Solution
`new Animation(document.querySelector("#a"), {left: "300px"}, 2);`

1. `'new Animation()'` creates a new animation object.
2. `'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")'.`
3. `'{left: "300px"}'` is the effects of the animation. In this case we are letting it move to 300px from left.
4. `'2'` will set the duration of the animation to 2 seconds. The bigger the number, the slower the animation speed and vice versa.