Transiciones en CSS3

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.

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 cuáles 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;

También es posible establecer varias propiedades, simplemente debemos separarlas con comas (,); por ejemplo si queremos cambiar el ancho y color de fondo seria: transition-property: width, background;

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;

La propiedad transition-duration es necesaria para que se ejecute la transición, su valor por defecto es 0 y si no se establece no ocurrirá ninguna transición.

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.

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). La declaración quedaría de la siguiente forma: transition-delay: 3s;

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

<div class="transi"> </div>
<style>
  .transi {
    width:100px;
    height:150px;
    background: #1cca50;
    border: solid 1px #000;
    transition-property: width;
    transition-duration: 10s;
    transition-timing-function: ease;
    transition-delay: 3s;  
  }
  .transi:hover {
    width:300px;
    background: yellow;
  }
</style>

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

<div class="transi"> </div>
<style>
  .transi {
    width:100px;
    height:150px;
    background: #1cca50;
    border: solid 1px #000;
    transition-property: width;
    transition-duration: 10s;
    transition-timing-function: ease-in;
    transition-delay: 3s;  
  }
  .transi:hover {
    width:300px;
    background: yellow;
  }
</style>

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

<div class="transi"> </div>
<style>
  .transi {
    width:100px;
    height:150px;
    background: #1cca50;
    border: solid 1px #000;
    transition-property: width;
    transition-duration: 10s;
    transition-timing-function: ease-out;
    transition-delay: 3s;  
  }
  .transi:hover {
    width:300px;
    background: yellow;
  }
</style>

Ease-in-out

El valor ease-in-out hará que la transición sea al principio lento 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

<div class="transi"> </div>
<style>
  .transi {
    width:100px;
    height:150px;
    background: #1cca50;
    border: solid 1px #000;
    transition-property: width;
    transition-duration: 10s;
    transition-timing-function: ease-in-out;
    transition-delay: 3s;  
  }
  .transi:hover {
    width:300px;
    background: yellow;
  }
</style>

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;

Ejemplo de linear

<div class="transi"> </div>
<style>
  .transi {
    width:100px;
    height:150px;
    background: #1cca50;
    border: solid 1px #000;
    transition-property: width;
    transition-duration: 10s;
    transition-timing-function: linear;
    transition-delay: 3s;  
  }
  .transi:hover {
    width:300px;
    background: yellow;
  }
</style>

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

<div class="transi"> </div>
<style>
  .transi {
    width:100px;
    height:150px;
    background: #1cca50;
    border: solid 1px #000;
    transition-property: width;
    transition-duration: 10s;
    transition-timing-function:cubic-bezier (1,1,1,1);      ;
    transition-delay: 3s;  
  }
  .transi:hover {
    width:300px;
    background: yellow;
  }
</style>

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 dejarán 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.- A continuación desarrollaremos un ejemplo de transición en con CSS3, se trata de un contenedor rectangular al que cambiaremos el radio de redondez de sus esquinas, de tal manera que el dicho contenedor se convierta en forma elíptica al pasar el puntero del ratón sobre ella; la transición tendrá una duración de 8 segundos, con una función de tiempo rápida luego lenta y un retraso de 2 segundos, veamos.

<div class="transi"> </div>
<style>
  .transi {
    width:300px;
    height:150px;
    background: #1cca50;
    border: solid 1px #000;
    transition-property: border-radius;
    transition-duration: 8s;
    transition-timing-function: ease-out;      ;
    transition-delay: 2s;  
  }
  .transi:hover {
    border-radius: 150px / 75px;
  }
</style>

Ejemplo 2.- El siguiente ejemplo trata de un elemento de texto, un párrafo cuyo tamaño aumentará desde el tamaño por defecto hasta los 47px cuando el puntero se ubique sobre él. La transición tendrá una duración de 7 segundos, al principio lento y luego rápido y sin retraso, es decir, se ejecutará de inmediato. Veamos.

<p class="transi">Este es un elemento de texto que cambiará de tamaño cuando el puntero del traton se ubique encima.</p>
<style>
  .transi {
    background: #1cca50;
    border: solid 1px #000;
    transition-property: font-size;
    transition-duration: 7s;
    transition-timing-function:ease ;
    
  }
  .transi:hover {
    font-size:47px;
  }
</style>

Transición de dos o mas propiedades

Anteriormente ya habíamos mencionado que es posible hacer la transición de dos o más propiedades, simplemente debemos separarlas con comas (,) cuando las mencionamos dentro de la propiedad transition-property. A continuación veamos un par de ejemplo para que veas cómo funciona.

Ejemplo 1.- En el siguiente ejemplo aplicaremos la transición a dos propiedad de un texto, al color de letra (color) y su tamaño (font-size); la transición se hará desde su valor por defecto a un color rojo y tamaño de 37px; la transición durará 7 segundos, con una función de tiempo ease-in-out

<p class="transi">Texto de ejemplo para cambiar el color y tamaño de letra al pasar el cursos por encima.</p>
<style>
  .transi {
    transition-property: color, font-size;
    transition-duration: 7s;
    transition-timing-function:ease-in-out;      ;
    transition-delay: 3s;  
  }
  .transi:hover {
    color: red;
    font-size:37px;
  }
</style>

Ejemplo 2.- En el siguiente ejemplo cambiaremos cuatro propiedades de un contenedor que tiene forma rectangular; dichos cambios se aplicarán a: el ancho (width), altura (height), el color de fondo (background) y el radio de las esquinas redondeadas (border-radius). Veamos cómo se hace.

<div class="transi"> </div>
<style>
  .transi {
    width:100px;
    height:50px;
    background: #1cca50;
    transition-property: width, height, background, border-radius;
    transition-duration: 10s;
    transition-timing-function:linear;
    transition-delay: 2s;  
  }
  .transi:hover {
    width:300px;
    height:150px;
    background: yellow;
    border-radius: 150px / 80px;
  }
</style>

La propiedad transition

La propiedad transition 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.

Ejemplo 1.- Por ejemplo, realizaremos una transición de ancho (width), sin embargo utilizaremos una única propiedad de transición para declarar los valores de todas las propiedades de transición que hemos conocido, veamos.

<div class="transi"> </div>
<style>
  .transi {
    width:100px;
    height:150px;
    background: #1cca50;
    border: solid 1px #000;
    transition: width 10s ease 3s;
  }
  .transi:hover {
    width:300px;
  }
</style>

Ejemplo 2.- También es posible declarar varias transiciones en una sola línea, mediante la propiedad transition, simplemente debemos separar con comas cada transición, veamos.

<div class="transi"> </div>
<style>
  .transi {
    width:100px;
    height:150px;
    background: #1cca50;
    border: solid 1px #000;
    transition: background 7s ease 2s, width 10s ease 3s, border-radius 8s;
  }
  .transi:hover {
    background: red;
    width:300px;
    border-radius: 150px / 75px;
  }
</style>

[popup_anything id=»5821″]