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

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