Creating animation part 1

• COURSES
• CODE PLAYGROUND
• DISCUSS
• TOP LEARNERS

Creating Animations

27

1/3

     

Animations

Now that we know how to select and change DOM elements, we can create a simple animation.
Let's create a simple HTML page with a box element that will be animated using JS.

<style>
#container {
width: 200px;
height: 200px;
background: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: red;
position: absolute;
}
</style>
<div id="container">
<div id="box"> </div>
</div>Try It Yourself

Our box element is inside a container element. Note the position attribute used for the elements: the container is relative and the box is absolute. This will allow us to create the animation relative to the container.
We will be animating the red box to make it move to the right side of the container.
You need to be familiar with CSS to better understand the code provided.