1.1 - Simple Transition

In this example, .link1 is just a normal link, while .link2 has a 1 second transition applied. Hover to see the change.

a.link1 { 
  color:blue;
}
a:hover.link1 {
  color:red;
}

a.link2 { 
  color:blue;
  -webkit-transition: color 1s linear;
}
a:hover.link2 {
  color:red;
}

1.2 - The Long Way

In the above example -webkit-transition: color 1s linear; is actually shortcode for 3 properties:

  • -webkit-transition-property
  • -webkit-transition-duration
  • -webkit-transition-timing-function

Let's play with these.

a.link3 {
  color:blue;
  -webkit-transition-property: color;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
}

a:hover.link3 {
  color: red;
}

1.3 - Multiple Transition Properties

In this example we're going to transition 2 properties color and background-color. The duration of the background-color transition 5 seconds and the color transition is 1 seconds.

a.link4 {
background-color:white;
color:blue;
-webkit-transition-property: color, background-color;
-webkit-transition-duration: 1s, 5s;
-webkit-transition-timing-function: linear;
}

a:hover.link4 {
background-color:pink;
color: red;
}

1.4 - Just Do It All At Once, The Short Way

If you're tired of all the typing and want to simplify your code as well as make all the animation happen all at once in the same duration, change your code to this.

a.link5 {
  background-color:white;
  color:blue;
  -webkit-transition: all 1s linear;
}

a:hover.link5 {
  background-color:pink;
  color: red;
}

1.5 - All At Once, But Delay It

You can also delay transitions if you'd like.

a.link6 {
  background-color:white;
  color:blue;
  -webkit-transition: all 1s linear;
  -webkit-transition-delay: 2s;
}

a:hover.link6 {
  background-color:black;
  color: red;
}