Efectos especiales con CSS3: transiciones

Entrada donde se explica la propiedad transition de CSS3 y cómo adaptarla a los distintos navegadores.

archivado en: HTML/CSS / 12 octubre, 2012

No me gustan las animaciones en las páginas, sobre todo cuando su lectura demanda cierta concentración, como puede ser el caso de un periódico digital o un blog. Creo que distraen la atención y dificultan la usabilidad. Es como tratar de escuchar una conversación con alguien gritándote al oído de forma más o menos estruendosa. En cambio, sí me parecen muy interesantes las transiciones, es decir, que al pasar el ratón por una zona interactiva suceda algo, ya que invitan al usuario a seguir investigando la página y funcionan muy bien estéticamente.

Antes de las CSS3, sin usar JavaScript o Jquery, los efectos que se podían conseguir estaban muy limitados y el problema es que no conviene abusar de estos dos lenguajes, pues al ejecutarse en el ordenador cliente son un riesgo para la accesibilidad de un sitio. Sin embargo ahora se pueden realizar transiciones muy chulas de forma sencilla con la nueva propiedad transition de CSS3. Veamos cómo funciona 🙂

Tal y como viene especificado por la W3C, lo cual no implica necesariamente que todos los navegadores sean capaces de interpretarlo de forma correcta, las transiciones pueden definirse con las siguientes propiedades

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function

a) transition-property 

Sirve para especificar qué parámetro se debe cambiar, como el ancho, el alto, el z-index, la opacidad, el color de fondo... En fin, cualquier propiedad habitual de las CSS.

  • selector {
  • transition-property: opacity;
  • transition-property: width;
  • transition-property: z-index;
  • }

Si son varias, se pueden escribir en una sola línea separadas por comas:

  • selector {
  •  transition-property: opacity, width, z-index;
  • }

b) transition-duration

Define el tiempo que dura la transición, por lo general, en segundos (s).

  •  selector {
  •  transition-duration: 1s;
  • }

c) transition-delay

El tiempo que hay entre que se produce el evento que desencadena la transición y su comienzo. Por defecto es 0s.

  •  selector {
  •  transition-delay: 1s;
  • }

d) transition-timing-function

Define el ritmo de la transición: a saltos, lenta al principio y más rápida al final, etcétera. Resultará familiar a las personas que han trabajado con Flash, Premiere, After Efects o cualquier otro programa en el que se manejen keyframes. Los principales valores que puede tener son:

  • linear: lineal.
  • ease: lento al principio, luego rápido y finalmente lento.
  • ease-in: muy lento al principio y muy rápido al final.
  • ease-out: muy rápido al principio y muy lento al final.
  • ease-in-out: lento al principio, rápido entremedias y lento al final.
  • steps (nº): por pasos, entre paréntesis se indica el número de saltos que debe dar.
  • cubic-bezier (n,n,n,n): definiendo los puntos de una curva bleizer.
  •  selector {
  •  transition-timing-function: linear;
  • }

Todas estas propiedades se pueden definir en una sola línea poniendo una tras otra sin comas:

  • transition:[property] [duration] [timing-function] [delay];
  • transition:opacity 1s linear 1s ;

Transiciones y pseudo-clases

Las pseudo-clases y los pseudo-elementos son unas especificaciones que se pueden añadir a los selectores CSS para definir comportamientos especiales, como el cambio de color de los enlaces que ya han sido visitados. Las que nos interesan ahora son tres que funcionan dinámicamente, es decir, que cambian como respuesta a las acciones del usuario:

  • :hover -> cuando el cursor del ratón se sitúa sobre el elemento (equivale al evento onmouseover).
  • :active -> cuando se pulsa el ratón sobre el elemento (equivale al evento onclick).
  • :focus -> cuando el elemento recibe el foco, por ejemplo, al situar el cursor en el campo de un formulario (equivale al evento onfocus).

Por ejemplo, en cualquier selector, como este para definir una caja con el fondo rojo con las letras blancas,...

  • .cajita_roja {
  • background-color: #900;
  • height:50px;
  • width:100px;
  • padding: 1em;
  • color:#fff;
  • font-weight: bold;
  • }

... se puede añadir la pseudo-clase hover que modifique algún parámetro al situarse el ratón encima, como el color del fondo.

  • .cajita_roja:hover {
  • background-color: #090;
  • }

Así, lo haría de golpe, pero, si añadimos la propiedad transitions en el selector original, en teoría el cambio sería gradual. Y digo en teoría porque, como está aún en fase medio experimental, para que funcione hay que hackear un poco el tinglado añadiendo las extensiones propietarias de los distintos navegadores:

  • .cajita_roja {
  • background-color: #900;
  • height:50px;
  • width:100px;
  • padding: 1em;
  • color:#fff;
  • font-weight: bold;
  • transition:background-color 3s linear;
  • -webkit-transition: background-color 3s linear; /* Chrome y Safari */
  • -o-transition: background-color 3s linear; /* Opera */
  • -moz-transition: background-color 3s linear; /* Mozilla Firefox */
  • -ms-transition: background-color 3s linear; /* Internet Explorer */
  • }
Demo

Para modificar más de un parámetro, lo más limpio es definir cada propiedad en una línea, separando los parámetros por comas (el primer valor de property se corresponde con el primero de delay, etcétera). Por ejemplo, para cambiar el color y el ancho de la cajita de antes:

  • #cajita_roja {
  • background-color: #900;
  • height:50px;
  • width:100px;
  • padding: 1em;
  • color:#fff;
  • font-weight: bold;
  • transition-property: background-color, width;
  • transition-duration: 2s, 3s;
  • transition-timing-function: linear; ease-out;
  • -webkit-transition-property: background-color, width;
  • -webkit-transition-duration: 2s, 3s;
  • -webkit-transition-timing-function: linear; ease-out
  • -moz-transition-property: background-color, width;
  • -moz-transition-duration: 2s, 3s;
  • -moz-transition-timing-function: linear; ease-out;
  • /* Y así con las demás extensiones. */
  • }
  • #cajita_roja:hover {
  • background-color: #090;;
  • width: 150px;
  • }
Demo

Combinada con otras nuevas propiedades de CSS3, como transform, los efectos pueden ser espectaculares, pero eso lo vemos otro día, que ya está bien por hoy.

Notas

Las transiciones de CSS3 deberían funcionar a partir de la versión 4 de Firefox, en Chrome, Safari y Opera. En Internet Explorer creo que funcionan a partir de la versión 10, aunque vete a saber tú lo que pasará en el futuro, pues igual en la siguiente versión ya no sirven... en fin, las cosinas de esta tostadora incapaz de interpretar ni media hoja de estilo de forma correcta.

Por otra parte, es importante que las transiciones solo sean un efecto visual añadido y no un elemento fundamental de la navegación, para que el usuario solo se pierda un efecto gráfico en caso de que no se interpreten.

To be continued... 😆

|| Tags: , ,

valoración de los lectores sobre Efectos especiales con CSS3: transiciones

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.2 sobre 5 (38 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

4 respuestas a “Efectos especiales con CSS3: transiciones