Las transiciones en CSS nos permiten aplicar un cambio de estilo gradual a cualquier elemento, del documento HTML, además, nos ofrecen la ventaja de poder especificar que propiedades css, transicionaran, el tiempo que durará, esta transición, el ritmo al que se desarrollara y el tiempo para que empiece esa transición, entre estilos, de esta forma podemos utilizarlas, para dar efectos de animación y dinámismo a las páginas.
La sintaxis de la propiedad transition recibe una serie de parametros: transition-property, transition-duration, transition-timing-function y transition-delay, que pueden declararse, cada uno por separado o en una sola línea de código, de manera abreviada.
Por Ejemplo: {transition: padding 3s linear 1s}
Es lo mismo que:
transition-property:padding; es el atributo css a transicionar (abajo hay una lista animada con casí todas las propiedades css, que admiten transition). Pueden ponerse las propiedades que quieras, separadas por comas, o usar la palabra clave all para transicionar a la vez, todas las propiedades css, que espacifiques.
transition-duration:3s; son 3 segundos, que es el valor en tiempo que durará la transición, también puede ir en ms (milisegundos). Cabe decir que no es conveniente hacer transiciones demásiado largas.
transition-timing-function:linear; es uno de los valores que podemos asignarle, para darle distintos ritmos a la transición, es opcional declararlo, pero importante, su valor por defecto, es ease.
transition-delay.1s; que especifica, el tiempo de retardo con que empezará la transición. Opcional declararlo, pero muy útil, sobre todo para encadenar transiciones.
Las transiciones anteriores, inician con la pseudoclase :hover de CSS, es decir, al posar el ratón sobre el elemento. También es habitual emplear para las transiciones los pseudoelementos ::after y ::before
Como he comentado antes, se pueden especificar todas las propiedades css, a transicionar, separadas por comas o abreviar empleando all.
Todo se ve mejor con un ejemplo haz hover en la siguiente caja azul y después en cada una de sus etiquetas, para observar como transicionán.
Para declarar el ritmo, con que se desarrollarán tanto transiciones, como animaciones, estan las funciones de tiempo (cubic-bezier). Definiremos el transcurso de la transición, especificando, alguno de estos valores, por palabras claves (ya tienen la cubic-bezier, predefinida), que tienes a continuación, en una lista, en la que cada <li> hace una transición con el ritmo que define, o ponerle una curva de tiempo (cubic-bezier), personalizada. Por defecto las transiciones se desarrollan por el valor ease.
EASE: transicion con inicio y final lentos y transcurso rápido. cubic-bezier(0.25, 0.1, 0.25, 1)LINEAR: transición que transcurre al mismo ritmo. cubic-bezier(0, 0, 1, 1)EASE-IN: transición con inicio lento y transcurso y final normal. cubic-bezier(0.42, 0, 1, 1)EASE-OUT: transición con inicio y transcurso normales y final lento. cubic-bezier(0, 0, 0.58, 1)EASE-IN-OUT: transición con inicio y final lentos y transcurso normal. cubic-bezier(0.42, 0, 0.58, 1)cubic-bezier(0.2, 0.4, 0.7, 0.8): transición personalizada.cubic-bezier(0, -1, 1, 2): transición con rebotes.Existe otra forma de declarar el ritmo ó transcurso, de las transiciones y animaciones, las funciones de salto, muy útiles en algunos casos, permiten establecer un numero determinado de pasos ó fotográmas en la transición ó animación y puede recibir todos estos valores:
steps(5, jump-start)Transición ó animación, que dará cinco saltos, omitiendo el primero.
steps(5, jump-end)Transición ó animación, con cinco saltos, que omite el último.
steps(5, jump-none)Transición ó animación, de cinco saltos, que no omite ninguno.
steps(5, jump-both)Transición ó animación, de cinco saltos, que omite el primero y el último.
steps(5)Transición ó animación que equivale a steps(5, jump-end).
steps(5, start)Transición ó animación que equivale a steps(5, jump-start).
steps(5, end)Transición ó animación que equivale a steps(5, jump-end).
step-startTransición ó animación que equivale a steps(1, jump-start).
step-endTransición ó animación que equivale a steps(1, jump-end).
Estas funciones de salto, son especialmente interesantes, para implementar transiciones ó animaciones, de imágenes de tipo sprite, que son imágenes de objetos ó personajes, con ligeras variaciones, entre fotográma y fotográma. Enpleando funciones de tiempo, no quedan bien, hay que ponerles, estas funciones de salto, para que al transicionar o animar la imágen, cambiando la background-position, hagan el efecto, de ser una imágen individual animada. Abajo puedes ver un sencillo ejemplo, que se activa al posar el ratón, en la cara sonriente.
Si declaramos una transición sobre un elemento, empleando la pseudoclase :hover, esta será la transición de entrada, en el momento que retiramos el ratón, del elemento, este volverá a su estado original, de forma brusca. Para conseguir que vuelva a su estado original, también transicionando de manera gradual, debemos establecer también la transición, al elemento en el CSS. Que no tiene porque ser la misma, en duración ó propiedades, esto se conoce, como, transición de salida.
También es importante destacar, que en transiciones, de varias propiedades css, a la vez, podriamos especificar, distintas duraciones, para la transición de cada propiedad, creándo efectos distintos, de la siguiente manera:
Como habras podido observar, la propiedad transition es una gran herramienta de css, para crear efectos dinámicos en las páginas, sin necesidad de javascript, aunque combinado con el, se consigue, mayor control sobre las mismas.
Tampoco es recomendable abusar de los efectos, como hago yo en esta página, pues no gustán a todos los usuarios y distraen de la lectura. Son más esteticos los efectos sutiles y que cumplán una función, como por ejemplo, en el :hover sobre enlaces.
Pero observar, los efectos que se pueden crear con transiciones, en listas, menus de navegación o en botones en vuestras web, por cierto aprovecho para remitiros a mi página botones sociales, donde os muestro diferentes ubicaciones, para los botones sociales, en una web.
Ya para concluir, si te ha gustado alguno de mis efectos, ya sabes haz click derecho y mostrar codigo fuente o exámina la página con la herramienta dev tools del navegador, así es como yo aprendo.
