Putting it all together

Let’s make a fun example, bringing together some of the things we have looked at in previous chapters.

With just a couple of elements, let’s simulate the basics of a basketball court, and the ball bouncing and being passed around.

Here is the markup. Probably the least important part of this example:

<div class="court">
    <div class="ball"></div>
</div>

Let’s make a vague court shape and give it a background color something like a basketball court:

.court {
    width: 400px;
    height: 200px;
    background-color: rgb(197, 150, 86);
    position: relative;
}

Now we want to add a ball to our court. This ball will simulate a bounce with an animation and transition its position, which we will set with custom properties. Now, if for some reason you haven’t read Chapter 11, Transitions, Transformations, and Animations, yet (shame on you), all you need to know is...