Chapter 8. Animating Your Links to Life

Back in the day, links were very predefined and boring. They were made up of underlined blue text that turned purple if you had already visited them. Often, there was also a mysterious active state where your links would turn red when you were interacting with them. They looked sorta like the following:

Today, you have a lot more control to make your links look as boring or as exciting as you want. Since we are all about doing exciting things, this tutorial will show you a handful of examples that you can learn from to make your links behave differently (in an awesome way!) when you interact with them. Spoiler alert: The main way we are going to do that is by relying on our old friend, the CSS transition.

The Starting Point

To help you focus on what is important, let’s start with some HTML that contains some basic styling and links. In a new HTML document, add all of the following:

<!DOCTYPE html>
<html>
 
<head>
  <title>Cool Hover Stuff!!!</title>
  <style>
    body {
      background-color: #EEE;
      margin: 50px;
    }
    h1, li {
      font-family: sans-serif;
    }
    h1 {
      background-color: #FFCC00;
      display: inline-block;
      padding: 10px;
    }
    li {
      margin-bottom: 30px;
      font-size: 24px;
    }
  </style>
</head>
 
<body>
  <h1>Halloween Ideas</h1>
  <ul>
    <li><a href="#" target="_blank" ...

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.

Start your free trial