Transiciones en CSS3

Anterior
Avanzar

Hoy aprenderemos todo sobre las transiciones en CSS3,  qué son las transiciones y cómo funcionan, cómo podemos aplicar transiciones CSS3 a un elemento HTML cualquiera, de tal manera que este cobre vida dentro de la página web. Estamos a punto de hacer maravillas mediante código CSS que permita pasar los valores iniciales de una propiedad a otra de una manera controlada e impresionante. Entonces empecemos.

Qué es una transición en CSS3

Una transición es el evento que sucede entre el estado inicial y final, es decir el cambio de estado, dicho cambio puede ser de alguna característica o propiedad de un elemente HTML en nuestro caso, este cambio lo haremos mediante código CSS.

Una transición se ejecuta cuando ocurre un evento determinado, e nuestro caso específico trabajaremos cuando el ratón pasa por encima de un elemento; es decir aprenderemos a aplicar transiciones cuando el puntero del ratón pasa o se detiene sobre un elemento específico.

Recordemos que para determinar un estilo cuando el puntero del ratón pasa sobre un elemento, utilizamos una pseudoclase llamada :hover, por ende estableceremos dentro de ella los estados finales de la transición.

Cómo funcionan las transiciones

Las transiciones en CSS3 funcionan de manera bastante simple, mediante un selector estableceremos el elemento que será afectado, es decir al que queremos aplicar una transición, luego mediante las propiedades de transición estableceremos que características y como se realizará la transición.

Cómo poner transiciones en CSS3

Poner una transición a cualquier elemento es muy simple, mediante el selector apuntaremos al elemento que queremos aplicar la transición, y mediante las propiedades de transición determinamos cuál es la propiedad a cambiar, la duración de dicha transición, su función de tiempo, retraso, etc.

Te recomendamos leer:  La regla @ font-face

La sintaxis tendría la siguiente forma: selector {propiedades: valores;}

Dichas propiedades de animación pueden ir separadas independientemente o  también pueden ir todas en una sola declaración de transición, la misma que veremos después de conocer dichas propiedades. A continuación conoceremos las propiedades de transición.

Propiedades de transición

Las propiedades de transición, se escriben como cualquier propiedad de CSS con su respectivo valor, a continuación conoceremos cuales son y los valores que pueden tomar estos.

Transition-property

La propiedad transition-property nos permite establecer la propiedad a ser traicionada, es decir al que se aplica la transición, por lo tanto el valor para la propiedad transition-property es una propiedad CSS.

Los valores que puede tomar transition-property puede ser cualquier propiedad  CSS, por ejemplo si queremos que la transición sea del ancho de un elemento, entonces el valor de transition-property sería width (ancho) y la sintaxis quedaría de la siguiente manera: transition-property: width;

Por poner otro ejemplo, si la propiedad a cambiar fuera el color de letra de un elemento de texto, entonces la declaración quedaría de la siguiente manera: transition-property: color;

Transition-duration

Mediante la propiedad transition-duration podemos indicar el tiempo de duración de la transición desde que inicia hasta que culmina. Su valor es un valor numérico con su respectiva unidad de tiempo, generalmente suele ser segundos (s) o milisegundos (ms).

Por ejemplo si queremos una duración de 10 segundos, la sintaxis quedaría de la siguiente manera: transition-duration: 10s;

Transition-timing-function

Mediante la propiedad transition-timing-function podemos definir la función de tiempo, básicamente se trata de elegir el ritmo en el tiempo de la transición, podemos elegir entre ritmos uniformes, acelerados, lentos y sus combinaciones. Entre los valores que puede tomar podemos mencionar: ease, ease-in, ease-out, ease-in-out, linear y cubic-bezier. Cada una de estas las desarrollaremos adelante con sus respectivos ejemplos de aplicación.

Te recomendamos leer:  Sombras para texto en CSS3

Transition-delay

La propiedad transition-delay  permite definir el retraso de la transición, básicamente se trata del tiempo que la ejecución de la transición se retrasa antes de empezar. Es decir, en caso queremos que la transición se inicie en un tiempo específico, podemos establecer dicho momento en segundos (s) o también milisegundos (ms).

Los valores de la propiedad transition-timing-function

Mediante los valores de la propiedad transition-timing-function, podemos indicar la manera en que se realiza la transición, esto referido en cuanto al ritmo o velocidad de ejecución; los valores que puede toman son los siguientes:

Ease

Cuando transition-timing-function toma el valor ease la transición empieza con ritmo lento y luego acelera para culminar. La sintaxis quedaría de la siguiente forma: transition-timing-function: ease;

A continuación veamos un ejemplo para ver cómo funciona

Ease-in

El valor ease-in hará que la transición inicie lentamente, luego se torna acelerado y finalmente se detiene espontáneamente. La regla CSS quedaría de la siguiente forma: transition-timing-function: ease-in;

Ejemplo de ease-in

Ease-out

Cuando la propiedad transition-timing-function toma el valor ease-out, la transición es rápida al principio pero luego se desacelera hasta que al final se detiene, es decir comienza rápido y se detiene lentamente. La declaración seria: transition-timing-function: ease-out;

Ejemplo de transición con ease-out

Ease-in-out

El valor ease-in-out hará que la transición sea al principio lenta y luego rápida, sin embargo no es igual al resultado producido por ease, ya que ease-in-out produce una transición más sutil; la forma de establecer seria: transition-timing-function: ease-in-out; veamos un ejemplo:

Ejemplo de ease-in-out

Linear

Cuando transition-timing-function toma el valor linear, la transición sucede con ritmo o velocidad constante, por lo tanto la transición es uniforme en el tiempo; la declaración seria: transition-timing-function: linear;

Te recomendamos leer:  La propiedad Word-wrap

Ejemplo de linear

Cubic-bezier ()

El valor cubic-bezier() nos permite crear un ritmo de transición personalizado, mediante cuatro valores numéricos que van del 0 al 1 y separadas por comas (,) podemos establecer un ritmo de ejecución personalizado, la declaración seria: transition-timing-function: cubic-bezier (1,1,1,1);

Ejemplos de transición usando cubic-bezier () en CSS

Ejemplos de transiciones en CSS3

Ahora que conocimos las propiedades de transición y además de practicar con ejercicios de aplicación, es momento de pasar a crear transiciones maravillosas que te dejaran con la boca abierta :v, bueno.

A continuación crearemos varias transiciones haciendo uso de todo lo aprendido hasta el momento. Sin embargo, debo decirte que al final de esta lección desarrollaremos una forma más fácil y revolucionaria de aplicar transiciones; todo lo que aprendimos hasta ahora se condensa en una sola propiedad, así que te recomiendo ir hasta el final, que esta lección no acaba con estos ejemplos.

Ejemplo 1.-

Ejemplo 2.-

Ejemplo 3.-

Ejemplo 4.-

La propiedad transition

La propiedad tansition condensa todas las propiedades aprendidas en una sola, ahora es posible declarar todas las propiedades de transición en una sola declaración, con la única propiedad transition, ahora podemos definir los valores simplemente separándolos con espacios.

Por ejemplo

Transition: height 7s ease 4s

Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios