O'Reilly logo

Creating Web Animations by Kirupa Chinnathambi

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required