Chapter 3. Introduction to CSS Transitions
When you’re interacting with UIs, a lot of the animations you’ll see won’t be of the CSS animation kind with its predefined keyframes. They will instead be reactions to the things you are doing. Examples of such reactions include a link underlining when you hover over it, a menu flying in when you tap on a button, or a text element getting bigger when it has focus. For animating these kinds of behaviors, you will use CSS transitions.
To better understand CSS transitions, let’s take a moment to see one in action on our friendly hexagon shape:
Notice that the image smoothly scales up and rotates when your mouse cursor is over it. It then smoothly scales and rotates back to its original state when your mouse cursor goes elsewhere. All of this is made possible thanks to the magic of CSS transitions, and in the following sections, you’ll learn the basics of how to use them.
Creating a Simple Transition
Just like with CSS animations earlier, the way you’ll learn about CSS transitions is simple. We are going to dive head first and just use them. The first thing we’ll need to do is create a new HTML document and add the following things into it:
<!DOCTYPE html><html><head><title>CSS Transitions!</title><style>#container{width:100%;height:290px;background-color:#EEE;display:flex ...
Get Creating Web Animations now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
