mi茅rcoles, 31 de agosto de 2022

馃捇 Transiciones CSS Suavizar cambios de estilo en interacciones del usuario

Sin duda es el efecto m谩s espectacular a aplicar sobre un elemento mediante CSS3. Permite pasar de un estado del elemento a otro haciendo un paso gradual en el tiempo que se configure. Por ejemplo, podemos hacer que una capa pase a doblar su tama帽o poco a poco.

Este tipo de efectos se sol铆an hacer con JavaScript, ahora es posible (aunque desde luego no con todas las posibilidades de JavaScript), desde CSS3.

Como vimos en el apartado de selectores, podemos utilizar pseudoclases como :hover para cambiar los estilos cuando el usuario mueva el rat贸n sobre el elemento HTML que tiene dicha pseudoclase. Esto provoca un cambio de estilo, y le da al usuario la confirmaci贸n de que est谩 preparado para confirmar una selecci贸n o acceder a una nueva secci贸n.

En CSS aparecen uno de los aspectos m谩s interesantes de una web interactiva: las transiciones. Hasta ahora, al utilizar una pseudoclase como :hover, el cambio de estilos ocurr铆a de golpe, pasando de un estado inicial a otro final. Utilizando transiciones tenemos a nuestra disposici贸n una gran flexibilidad que nos permitir谩 dotar de atractivos efectos de transici贸n que har谩n que nuestros dise帽os sean m谩s elegantes y agradables.

Las transiciones se basan en un principio muy b谩sico: conseguir un efecto suavizado entre un estado inicial y un estado final al realizar una acci贸n.

En este c贸digo HTML:

<!doctype html>
<html lang=”es”>
    <head>
        <meta charset=”UTF-8”>
            <title>Documento</title>
            <style>
					div{
						background-color:red;
						width:50px;
						height:50px;
					}

					div:hover{
						width:300px;
					}
				</style>
    </head>
    <body>
        <div>&nbsp;</div>
    </body>
</html>

Muestra en pantalla un rect谩ngulo de color rojo; al arrimar el rat贸n sobre 茅l (comportamiento :hover) el rect谩ngulo crece hasta los trescientos p铆xeles.

Mediante las transiciones podemos hacer que ese cambio se realice progresivamente (de otro modo, el cambio aparece de golpe).

Propiedades de transici贸n

Las propiedades CSS que podemos utilizar relacionadas con las transiciones son las siguientes:

Propiedades Descripci贸n Valor
transition-property Propiedades CSS afectadas por la transici贸n. all | none | propiedad css
transition-duration Tiempo de duraci贸n. 0 |
transition-timing-function Ritmo de la transici贸n. Ver funciones de tiempo
transition-delay Tiempo de retardo inicial. 0 |

Observa que por defecto las transiciones est谩n habilitadas para todas las propiedades CSS involucradas. Sin embargo, tienen una duraci贸n de 0s. Salvo que cambiemos esta duraci贸n, no se realizar谩 transici贸n.

Veamos como funciona cada una de estas propiedades detalladamente:

Transition-property

En primer lugar, la propiedad transition se utiliza para especificar la propiedad a la que que afectar谩 la transici贸n.

Las propiedades que se pueden indicar son width, height, background-color,.. Es decir, en principio cualquier propiedad CSS. Pero como es l贸gico los navegadores s贸lo pueden realizar la transici贸n sobre algunas.

Al indicar sobre qu茅 propiedad realizamos la transici贸n s贸lo podemos indicar una. De manera que, podemos especificar la propiedad concreta (width o color, por ejemplo) o simplemente especificar all (valor por defecto) para que haga la transici贸n sobre todas las propiedades a la vez.

Por otro lado, none hace que no se aplique ninguna transici贸n.

Propiedades Valor
all Aplica la transici贸n a todas las propiedades css.
none No aplica transici贸n. El cambio se producir谩 de golpe (brusco).
propiedad css Aplica la transici贸n s贸lo a la propiedad css especificada.

Ten en cuenta que para la transici贸n se efectue correctamente, deber铆amos tener un estado inicial y un estado final, en caso contrario, el navegador podr铆a no saber uno de esos estados y por lo tanto, no podr铆a efectuar la transici贸n. En algunos casos no ser谩 necesario el estado inicial puesto que tomar谩 el valor por defecto en ese caso.

A continuaci贸n, veamos un ejemplo aplicado a la propiedad transition-property:

.element {
  /* Primer ejemplo: Anima todas las propiedades que cambien de estado */
  transition-property: all 4s;

  /* Segundo ejemplo: Anima s贸lo el ancho, el resto no transicionan, cambian de golpe */
  transition-property: width 4s;
}

Nota: Debes saber que no todas las propiedades CSS son animables (o transicionables). Por norma general, la mayor铆a de las propiedades que son cuantificables (valores num茅ricos, porcentajes, valores hexadecimales como colores, etc...) son animables, sin embargo, otras propiedades no lo son. Por ejemplo, la propiedad background-image para gradientes no se puede animar actualmente.

transition-duration

Duraci贸n de la transici贸n, se mide en tiempo. Con la propiedad transition-duration especificaremos la duraci贸n de la transici贸n, desde el inicio de la transici贸n, hasta su finalizaci贸n. Se recomienda siempre comenzar con valores cortos, para que las transiciones sean r谩pidas y elegantes. Recuerda que por defecto, las transiciones tienen una duraci贸n de 0s, por lo que si no cambias este valor, cambiar谩 de golpe y ser谩 lo mismo que no tener transici贸n.

Ejemplo: 

transition-duration:2 s;

Ojo: Si establecemos una duraci贸n demasiado alta, el navegador realizar谩 la transici贸n a trozos intermitentes, lo que har谩 que se vea a golpes. Adem谩s, transiciones muy largas resultar谩n molestas a los usuarios.

transition-timing-function.

Funci贸n de transici贸n que se usar谩 para mostrar la transici贸n puede tomar uno de estos valores:

  • linear. Es la que se emplea por defecto, la transici贸n tiene siempre la misma velocidad.
  • ease. La transici贸n frena la velocidad al final.
  • ease-out. La velocidad de la transici贸n va poco a poco disminuyendo.
  • ease-in. La velocidad de la transici贸n empieza lenta y luego va acelerando.
  • ease-in-out. La velocidad empieza frenada, acelera y vuelve a frenar al final.
  • cubic-bezier. Permite indicar 4 valores para realizar una funci贸n de tiempo que siga la funci贸n c煤bica de bezier. Con conocimientos sobre este tema, se pueden realizar efectos de transici贸n y tiempo a medida.

transition-delay

Por 煤ltimo, la propiedad transition-delay: Tiempo que tarda en empezar a realizarse la animaci贸n. Es un tiempo de espera inicial. Mos ofrece la posibilidad de retrasar el inicio de la transici贸n un n煤mero de segundos determinado. Si se omite, la transici贸n comienza inmediatamente.

Veamos un peque帽o ejemplo de todas estas propiedades de transici贸n. Utilizaremos la funci贸n de tiempo linear, que explicaremos en el pr贸ximo cap铆tulo:

a {
  background: #ddd;
  color: #222;
  padding: 8px;
}

a:hover {
  background: #fff;
  color: #666;
  padding: 25px;
  border: 1px solid #888;

  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: linear;
}

En este ejemplo, con all hemos determinado animar todas las propiedades que cambien:

  1. La propiedad background de color de fondo cambiar谩 de #ddd a #fff
  2. La propiedad color de color de texto cambiar谩 de #222 a #666
  3. La propiedad padding del tama帽o del relleno cambiar谩 de 8px a 25px
  4. La propiedad border cambiar谩 de 0 a 1px solid #888.

Este 煤ltimo es un caso especial, puesto que cambia de estilos porque toma el estilo inicial por defecto, que es un borde de 0px de grosor. Cada una de estas transiciones se realizar谩n a un ritmo lineal, durante 0.5s de duraci贸n.

Atajo: Transiciones

No hay por qu茅 rellenar todos los valores. Es decir, podemos resumir todas estas operaciones en una propiedad de atajo denominada transition, seg煤n la cual podemos indicar s贸lo la propiedad y el tiempo (el resto tomar谩n los valores por defecto)

Hay que tener en cuenta que s贸lo lo navegadores recientes soportan esta propiedad, antes todos ellos requer铆an el uso de prefijos.

Los valores del ejemplo superior, se podr铆an escribir como se puede ver a continuaci贸n (si no necesitas alg煤n valor, se puede omitir):

a:hover {
  /* transition: <property> <duration> <timing-function> <delay> */
  transition: all 0.5s linear;
}

Observa que estamos omitiendo el 煤ltimo valor. Si quisieramos un retardo de 2s a la hora de hacer una transici贸n, bastar铆a con a帽adir un 2s despu茅s de linear.

Ejemplos de propiedad transition

Otro ejemplo, podr铆a ser:


div {
  background-color: red;
  width: 50px;
  height: 50px;
 
}

div: hover {
  width: 300px;
  transition: width 3s ease-in 1s;
}

En el ejemplo precedente, tenemos una transici贸n para modificar la anchura, que dura tres segundos, acelera al final y tarda un segundo en empezar.

Y ac谩 otro ejemplo:


div {
  background-color: red;
  width: 50px;
  height: 50px;
 
}

div: hover  {
  width: 300px;
  transition: 2s;
}

En este segundo ejemplo, tendr铆amos un efecto de transici贸n que dura dos segundos para pasar del tama帽o anterior de la capa al nuevo simplemente arrimando el rat贸n.

Transiciones de entrada y salida

Aprovechando la cascada de CSS, podemos hacer transiciones de entrada y salida diferentes.

Si nos fijamos bien, la transici贸n del ejemplo anterior se aplica s贸lo al mover el rat贸n sobre el elemento (transici贸n de entrada). Sin embargo, si movemos el rat贸n fuera del enlace, no se produce transici贸n, sino que realiza el cambio de forma brusca. Esto ocurre porque le estamos diciendo que solo realice la transici贸n cuando tenemos el rat贸n encima (:hover), en caso contrario no lo har谩 porque no hay definidas propiedades de transici贸n.

Si movemos las propiedades de transici贸n al primer bloque, se aplicar谩n tanto en las transiciones de entrada como en las transiciones de salida. Por otro lado, si indicamos unas propiedades transition-* en a y otras en a:hover con diferentes valores, podremos conseguir (por ejemplo) duraciones diferentes.

a {
  background: black;
  color: white;
  padding: 8px;
  transition: background 0.2s linear;
}

a:hover {
  background: red;
  transition: background 2s linear;
}

En este caso, cuando mueves el rat贸n encima del enlace, la transici贸n tardar谩 2 segundos en ponerse en rojo. Sin embargo, cuando quitemos el rat贸n del elemento, se producir谩 en 0.2 segundos ya que se efectua la transici贸n del primer bloque.

¡Recuerda siempre tener cuidado con la herencia, cascada y especificidad!

Transiciones diferentes

Tambi茅n es posible que queramos indicar, por ejemplo, diferentes duraciones dependiendo de la propiedad CSS. Por ejemplo, que tarde mucho en cambiar el ancho del elemento, pero muy poco en cambiar el color de fondo.

Para ello, podemos separar con comas las diferentes propiedades que queremos transicionar:

a {
  transition:
    width 3s,
    background-color 0.5s;
}

De esta forma, la transici贸n de la propiedad width tardar谩 3 segundos, mientras que la del color de fondo durar谩 s贸lo 0.5s.

Propiedades transicionables

  • background
  • background-color
  • background-image (s贸lo si se usa degradado)
  • background-position
  • background-size
  • border (y sus subpropiedades, border.color, border-width,...)
  • border-radius (y sus subpropiedades, border.color, border-width,...)
  • bottom
  • box-shadow
  • clip
  • color
  • flex
  • font
  • font-size
  • font-size-adjust
  • font-stretch
  • font-weight
  • height
  • left
  • letter-spacing
  • line-height
  • margin (y sus subpropiedades)
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline (y sus subpropiedades)
  • padding (y sus subpropiedades)
  • right
  • text-decoration-color
  • text-indent
  • text-shadow
  • top
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index

    [19.2] animaciones



Bibliograf铆a:

https://lenguajecss.com/css/

https://jorgesanchez.net/



at
Labels:

No hay comentarios.:

Publicar un comentario

Nota: s贸lo los miembros de este blog pueden publicar comentarios.

Suscribirse a: Comentarios de la entrada (Atom)