La verdad es últimamente no hay que no aprenda algo nuevo y hoy es el día de las transiciones en links (cómo podéis ver en mi página principal http://mononelo.es). Es muy sencillo, pero aún al no estar unificados los códigos entres webkit, firefox y el normal y para ello tenemos que hacer lo de duplicar las propiedades por 4:

a {
     transition-property: background;
     transition-duration: 1s;
     transition-timing-function: linear, ease-in;
}

Y esto se tendría que repetir añadiendo delante en el caso de safari: -webkit- y en el caso de firefox: -moz-

Evidentemente no sólo se puede animar el background sino que podemos animar un montón de propiedades o todas a la vez con all:

  • Property
  • background-color
  • background-image
  • background-position
  • background-size
  • border-color (including sub-properties)
  • border-radius (including sub-properties)
  • border-width (including sub-properties)
  • border-spacing
  • bottom
  • -moz-box-flex
  • box-shadow
  • color
  • -moz-column-count
  • -moz-column-gap
  • -moz-column-rule-color
  • -moz-column-rule-width
  • -moz-column-width
  • clip
  • fill
  • fill-opacity
  • flood-color
  • font-size
  • font-size-adjust
  • font-stretch
  • font-weight
  • height
  • -moz-image-region
  • left
  • letter-spacing
  • lighting-color
  • line-height
  • margin  (including sub-properties)
  • marker-offset
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline-color
  • outline-offset
  • -moz-outline-radius (including sub-properties)
  • outline-width
  • padding (including sub-properties)
  • right
  • stop-color
  • stop-opacity
  • stroke
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-miterlimit
  • stroke-opacity
  • stroke-width
  • text-indent
  • text-shadow
  • top
  • -moz-transform-origin
  • -moz-transform
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index

En cuanto a la transition-duration se tiene que poner tantas duraciones como propiedades definidas (aunque si pones sólo una se aplica a todas las propiedades).

Finalmente sólo queda explicar transition-timing-function ya que existen varios métodos:

  • default
  • lineal
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier