Fabuloso CSS3. Las animaciones, antes reservadas a javascript y otras tecnologías, ahora son posibles con CSS. Existe la propiedad animation, más específica para animaciones, pero en este post voy a hablar de trasition. No es que sea la panacea pero se pueden conseguir animaciones interesantes con unas pocas líneas.

Sintaxis

La sintaxis general de la propiedad transition es:

transition: <propiedad> <duracion> <funcion-tiempo> <retraso>;

Por ejemplo:

a {
    text-decoration: none;
    color: blue;
}
a:hover {
    color: red;
}
a {
    transition: color 0.8s linear 0.2s;
}

Lo que hemos hecho es aplicar la regla color general al elemento a y hemos cambiado esta regla cuándo se pasa el ratón por encima (hover). Con la regla transition hemos definido como queremos que se haga ese cambio del color. Este ejemplo (ultra-básico) tendría esta pinta:

Sintaxis alternativa

Estos cuatro parámetros se pueden escribir también por separado:

a {
    transition-property: text-decoration;
    transition-duration: 0.8s;
    transition-timing-function: linear;
    transition-delay: 0.2s;
}

Cada parámetro es:

  1. transition-poperty: propiedad a la que se le va a aplicar el efecto de transición. Cualquier propiedad CSS es válida: width, height, color, border, etc.
  2. transition-duration: duración del efecto. Puede ser en segundos (s) o milisegundos (ms).
  3. trasition-timing-function: define la curva de velocidad a la que se produce el efecto. Puede ser:
    • ease: este es el valor por defecto. Tiene un comienzo lento, luego rápido y termina de nuevo lentamente. Es equivalente a cubic-bezier(0.25,0.1,0.25,1).
    • linear: la misma velocidad durante toda la duración de la transición. Equivalente a cubic-bezier(0,0,1,1).
    • ease-in: efecto de transición con comienzo lento. Equivalente a cubic-bezier(0.42,0,1,1).
    • ease-out: efecto de transición con comienzo rápido y final lento. Equivalente a cubic-bezier(0,0,0.58,1).
    • ease-in-out: efecto de transición con comienzo y final lento; más rápido en medio. Equivalente a cubic-bezier(0.42,0,0.58,1).
    • cubic-bezier(n,n,n,n): define tus propios valores para la curva de Bezier. Cada valor es entre 0 y 1.
    • initial: establece esta propiedad a su valor por defecto.
    • inherit: hereda esta propiedad del elemento padre.
  4. transition-delay: retraso en el comienzo de la transición. Puede ser en segundos (s) o milisegundos (ms).

transition-timing-function y transition-delay se pueden omitir. En este caso se tomará el valor ease y 0 respectivamente. Por ejemplo:

a {
    transition: text-decoration 0.8s;
}

Además, se pueden especificar varias transiciones a la vez separando el grupo de parámetros por una coma:

a {
    transition: text-decoration 0.8s, color 1s, font-weight 0.5s ease-out 0.1s;
}

Y también se puede aplicar a todas las propiedades CSS del elemento (en el siguiente ejemplo el cambio de cualquier propiedad de estilo del elemento a tendría una transición de 0.8s):

a {
    transition: all 0.8s;
}

Compatilidad navegadores

IE soporta la propiedad transition desde la versión 10; olvídate de IE 9 y versiones anteriores. En los demás navegadores es soportada desde versiones tempranas si se añaden los prefijos propios de cada uno. La versión de transition con mayor compatibilidad sería, por ejemplo:

.ejemplo {
    /*Chrome, Safari*/
    -webkit-transition: width 8ms linear 1s;
    /*Firefox*/
    -moz-transition: width 8ms linear 1s;
    /*Opera*/
    -o-transition: width 8ms linear 1s;
    /*Standard*/
    transition: width 8ms linear 1s;
}

Aplicación

Resumiendo, para aplicar transition hay que seguir estos pasos:

  1. Definir el estilo básico de un elemento
  2. Definir un estilo diferente para algunas acciones, generalmente :hover, :focus y similares.
  3. Definir la regla transition como se ha explicado anteriormente.

Ejemplos

En el siguiente ejemplo se puede ver como, al poner el ratón encima de cada div, hay una transición de las propiedades width y background con la misma duración pero con diferente curva de velocidad:

Ejemplo: cambio de tamaño y de forma:

Efecto fade-in

  • Elber Miguel

    Hola quiero saber como hacer que al activar el efecto aparezca un texto

  • Kevin Steven Quishpi Vera

    necesito una animacion pero no para un div sino para un texto que al darle clic en un boton el texto se agrande teniendo una transicion

    • Cristofer Fuentes

      puedes usar keyframe y modificar la propiedad font-size

    • En general, si hay un inicio y final de la animación claramente definido por acciones del usuario, si no necesitas ningún tipo de looping y si no hay puntos intermedios en la animación (es una transición propiamente dicha), utilizar keyframes puede ser demasiado pesado.

      Aunque la mejor opción dependerá del contexto exacto de uso, así de primeras y sin más información, yo no recomendaría keyframes para el caso planteado, me quedaría con transition.

      Pero si te fijas, aunque Kevin decida utilizar keyframes su duda seguiría siendo la misma: como aplicarlo a un texto y no a un div. Parece que su duda es sobre selectores CSS y no sobre animaciones.

    • Cristofer Fuentes

      Por lo que entendi el quiere que el texto se “agrande” pues para eso, como dije, se modifica la propiedad font-size (independiente si decide usar keyframe o transition)

      pd: no sabia que “keyframe” es mas pesado

    • Modificar propiedades CSS es lo que hacen ambos métodos, el font-size en este caso, pero los keyframes permiten muchas más cosas que transition.

      Por ejemplo, como dije antes, los keyframes permiten hacer loops o definir los puntos intermedios entre el valor inicial y el valor final de la propiedad CSS modificada. Ambos permiten definir la velocidad de cambio, pero puntos intermedios solo keyframes, además de otras muchas cosas. Si solo necesitas una “transición” ….. utiliza transition 😀

  • Víctor Rosas García

    Se puede hacer que las animaciones se activen automáticamente, sin tener que ejecutar alguna acción con el mouse?

    • felipe

      podria ser con un load

  • Javier

    Muchísimas gracias por la magistral y clara explicación del funcionamiento de transition. Asi es un placer iniciarse en la animación con css 😉