Animate anything with one line of CSS

The transition CSS property allows you to animate any continuous value over time. For example, if you have links that change color on hover like so:

a:link {
  color: blue;
}
a:link:hover {
  color: cyan;
}

To get a nice color fade effect, you only need to add one line:

a:link {
  color: blue;
  transition: color 300ms;  /* animate the color */
}
a:link:hover {
  color: cyan;
}

This tells CSS to smoothly vary the color property over the course of 300 milliseconds whenever it changes.

It's not limited to color. Some other common scenarios:

Make an element slightly expand or "blow up" on hover:

.el:hover {
  transform: scale(1.05, 1.05);
  transition: transform;
}

Make an element fade in:

.container .logo {
  opacity: 0;
}
.container:hover .logo {
  transition: opacity;
  opacity: 1;
}

Note that in this case you can't use display: none or even visibility: hidden to start the element out hidden, since these values are discrete, not continuous, that is they can only take one of a handful of values. Discrete properties cannot be animated.