Ordenar hojas de estilo CSS con lintingSin categoría 

Transiciones CSS3

Transiciones CSS3

Aplicaciones atractivas con transiciones CSS3.

Una aplicación atractiva tiene que provocar un impacto visual agradable en el usuario. Los usuarios siempre han de saber que cualquier orden suya (mediante clic del ratón, una pulsación en pantalla o cualquier otra forma) se recibe e interpreta de forma correcta en la aplicación, y las animaciones ofrecen una manera muy interesante de conseguir esto.

La nueva especificación HTML5 (aunque, en honor a la verdad, tendría que decir “la nueva especificación CSS3”) incorpora una herramienta muy potente para gestionar animaciones sencillas: las transiciones.

Introducción

Al principio, el grupo de trabajo de CSS dentro del W3C se resistía a integrar las transiciones dentro de CSS argumentando que en realidad no son propiedades de los estilos, pero finalmente los diseñadores y desarrolladores consiguieron convencerles de que las transiciones son en realidad estilos dinámicos y que pueden tener cabida dentro de un archivo CSS.

Según se puede leer en el sitio web del W3C, CSS3 Transitions permite crear variaciones progresivas sobre los siguientes tipos de propiedades:

  1. Color: interpolación entre los componentes rojo, verde, azul y alpha (tratando a cada uno como un número, como se verá más adelante).
  2. Longitud: interpolando entre valores expresados como números reales.
  3. Porcentaje: interpolando entre valores expresados como números reales.
  4. Entero: interpolado en pasos discretos (números completos). La interpolación tiene lugar en el espacio de los números reales y se convierte a entero utilizando la función floor().
  5. Número: se interpola entre valores expresados como números reales (coma flotante).
  6. Lista de transformación: puedes consultar la especificación CSS Transforms en: http://www.w3.org/TR/css3-2d-transforms/.
  7. Rectángulo: se interpolan los valores x e y, y los componentes de anchura y altura (todos estos valores se tratan como números).
  8. Visibilidad: se interpola en forma de pasos discretos. La interpolación se produce en el espacio de números entre el cero, el 1, donde 1 significa “visible” y el resto de valores son “hidden” (ocultos).
  9. Sombra: se interpolan los valores de color, coordenadas x e y, y el componente de difuminado (blur), tratando todos los valores como de color o número según corresponda. En aquellos casos donde existen listas de sombras, la lista más corta se rellena al final con sombras de color transparente y todas las longitudes (x,y y difuminado), con valor cero.
  10. Gradiente: se interpolan los valores de posición y color en cada parada. Tienen que ser del mismo tipo (radial o lineal ) y con el mismo número de paradas para poder realizar la animación.
  11. Servidor de dibujo (SVG): la interpolación solo está soportada para las transiciones de gradiente a gradiente y de color a color. Funcionan como se ha descrito antes para cada uno de esos valores.
  12. Lista separada mediante espacios de los elementos anteriores: si la lista tiene el mismo número de elementos, cada elemento dentro de ella se interpola siguiendo las reglas anteriores. Si no, no se produce la interpolación.
  13. Una propiedad abreviada: si todas las partes de una abreviatura se pueden animar, la interpolación se efectúa como si se hubiera especificado cada una de las propiedades de manera individual.

Y esta es la lista de propiedades que se pueden modificar mediante transiciones:

  1. background-color (color)
  2. background-image (solo gradientes)
  3. background-position (porcentaje y longitud)
  4. border-bottom-color (color)
  5. border-bottom-width (longitud)
  6. border-color (color)
  7. border-left-color (color)
  8. border-left-width (longitud)
  9. border-right-color (color)
  10. border-right-width (longitud)
  11. border-spacing (longitud)
  12. border-top-color (color)
  13. border-top-width (longitud)
  14. border-width (longitud)
  15. bottom (longitud y porcentaje)
  16. color (color)
  17. crop (rectángulo)
  18. font-size (longitud y porcentaje)
  19. font-weight (número)
  20. grid-* (diversos valores)
  21. height (longitud y porcentaje)
  22. left (longitud y porcentaje)
  23. letter-spacing (longitud)
  24. line-height (número, longitud y porcentaje)
  25. margin-bottom (longitud)
  26. margin-left (longitud)
  27. margin-right (longitud)
  28. margin-top (longitud)
  29. max-height (longitud y porcentaje)
  30. max-width (longitud y porcentaje)
  31. min-height (longitud y porcentaje)
  32. min-width (longitud y porcentaje)
  33. opacity (número)
  34. outline-color (color)
  35. outline-offset (entero)
  36. outline-width (longitud)
  37. padding-bottom (longitud)
  38. padding-left (longitud)
  39. padding-right (longitud)
  40. padding-top (longitud)
  41. right (longitud y porcentaje)
  42. text-indent (longitud y porcentaje)
  43. text-shadow (sombra)
  44. top (longitud y porcentaje)
  45. vertical-align (palabras clave, longitud y porcentaje)
  46. visibility (visibilidad)
  47. width (longitud y porcentaje)
  48. word-spacing (longitud y porcentaje)
  49. z-index (entero)
  50. zoom (número)

Declaraciones

Para declarar una transición en un archivo CSS nos basta con escribir el siguiente código:

transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;

Esta declaración indica que cualquier modificación del valor de cualquier propiedad debe hacerse en un intervalo de 0,5 segundos (y no de forma inmediata).

Y podemos también definir las transiciones a nivel individual para cada propiedad:

transition-property: opacity left top;
transition-duration: 0.5s 0.8s 0.1s;
transition-timing-function: ease linear ease;
transition-delay: 0s 0s 1s;

Finalmente, podemos utilizar la propiedad abreviada “transition” para definir todo lo necesario en una sola línea:

transition: all 0.5s ease 0s;

En esta versión abreviada se pueden incorporar todas las propiedades que queramos, separándolas con comas:

transition: opacity 0.5s ease 0s, left 0.8s linear 0s;

Las transiciones se disparan cuando se modifica una propiedad del objeto indicado. La modificación se puede hacer con JavaScript o utilizando CSS3 mediante la asignación de una nueva clase a una etiqueta.

Por ejemplo, si usamos IE10, tenemos la siguiente declaración CSS3:

-ms-transition-property: opacity left top;
-ms-transition-duration: 0.5s 0.8s 0.5s;
-ms-transition-timing-function: ease linear ease;

Retardo

La línea “transition-delay” determina el retardo que se produce entre el momento en que se modifica el valor de la propiedad y el comienzo de la transición.

 

 

Eventos

Al final de cada transición se dispara un evento llamado “TransitionEnd”. Dependiendo de qué navegador utilicemos, el nombre cambia:

  • Chrome y Safari: webkitTransitionEnd
  • Firefox: mozTransitionEnd
  • Opera: oTransitionEnd
  • Internet Explorer: MSTransitionEnd

 

 

El evento nos pasa la siguiente información:

 

  • PropertyName: Nombre de la propiedad animada
  • ElapsedTime: La cantidad de tiempo, en segundos que ha estado desarrollándose la transición

Más sobre las transiciones CSS3

Puedo sugerir dos excelentes razones por las cuales las transiciones CSS3 van a ser muy útiles:

 

  1. Aceleración por hardware: las transiciones basadas en CSS3 las maneja directamente la GPU (si existe en el equipo) dando lugar a resultados mucho más suaves. Y esto es verdaderamente importante en los dispositivos móviles, cuya capacidad de computación, en general, es limitada.
  2. Mayor independencia entre el código y el diseño: desde mi punto de vista, el desarrollador no debería tener que ocuparse de las animaciones ni de nada relacionado con el diseño. Por esa misma razón, el diseñador/artista no tendría que ocuparse del JavaScript. Por eso me parece que CSS3 Transitions es una novedad realmente interesante para los diseñadores, que pueden describir todas las transiciones utilizando CSS sin involucrar a los programadores.

 

Soporte y fallback

 

Desde la versión PP3, IE10 (que ya podemos descargar con la versión Preliminar de Desarrollo de Windows 8 desde aquí) soporta las transiciones CSS3:

 

 

Sin duda, puesto que la especificación aún no está terminada (está en la fase working draft), nos va a tocar utilizar los prefijos de fabricante: -ms-, -moz-, -webkit-, -o-.

 

Podemos además ver que, obviamente, será necesaria una solución transparente para resolver la situación que se va a presentar en el resto de navegadores. Si el navegador no soporta la funcionalidad, tendremos que preparar un fallback programando con JavaScript.

 

Conviene tener preparado un método de fallback si las funcionalidades de tus sitios web dependen de las transiciones. Si no quieres hacerlo, deberías pensar en utilizar las transiciones solamente como mejoras de diseño. En este caso el sitio web seguirá funcionando, pero la experiencia completa solo se podrá ver en los navegadores que la soporten. Aquí solemos hablar de “mejoras progresivas” ya que cuanto más potente es el navegador, más funcionalidades nos permite ofrecer.


 

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts