Introduction

In the previous chapters, we discovered how to structure a web page with HTML and style it with CSS. We also introduced HTML forms, responsive web design, and media elements, including video, audio, and canvas.

In this chapter, we'll look at CSS animations. Introducing these to your web page can be a real strength as they can add valuable feedback and interaction to the page. Humans are naturally drawn to movement, so adding subtle animations can really guide users to the important parts of a web page at any given moment. A good example of this could be an HTML form submission, when the user submits the form if they didn't fill out their email address in the correct format. This means you could use CSS animations to animate the email input box for a second or two (for instance, shake it side to side by a few pixels), alongside showing the error message and highlighting to the user the location of the error that they need to correct before they can move forward...