Animating elements
Lastly, we want to show you that you can animate using HTML, CSS, and JavaScript. This allows us to do even cooler things with our web page. For example, we can trigger an animation as an event. This can be used for many different purposes, for example, to illustrate an explanation, to draw the user's eyes to a certain location, or to play a game.
Let's show you a very basic example. We can use the position
key and set it to absolute
in CSS. This makes the position of the element relative to its nearest positioned parent. Here, that would be the body. This is the code for a purple square that moves from left to right when a button is clicked.
<!doctype html>
<html>
<style>
div {
background-color: purple;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<body>
<button onclick="toTheRight()">Go right</button>
<div id="block">...