Transiciones
Transiciones
Las transiciones buscan tener un efecto suavizado entre dos instantes de tiempo al realizar una acción. Las propiedades que tenemos para trabajar las transiciones son:
En lugar de que un cambio de CSS (como un color de fondo, un ancho o una posición) ocurra de forma instantánea, puedes hacer que ocurra de forma gradual durante un período de tiempo.
Para que una transición funcione, el navegador necesita saber cuatro cosas. Estas "funciones" son en realidad las propiedades que controlan la transición:
- Qué propiedad animar (transition-property)
- Cuánto debe durar la animación (transition-duration)
- Cómo (con qué ritmo) debe ser la animación (transition-timing-function)
- Cuándo debe empezar la animación (transition-delay)
transition-property
Esta propiedad CSS establece la propiedad CSS a la que se le aplicará una transición.
- transition-property: background-color; (Anima solo el color de fondo).
- transition-property: transform; (Anima solo la transformación).
- transition-property: width, height; (Anima el ancho y el alto).
- transition-property: all; (Valor por defecto. Anima cualquier propiedad que cambie)
Nota: No todas las propiedades se pueden animar. Por ejemplo, no puedes "animar" un font-family (de Arial a Times New Roman). Pero sí la mayoría de propiedades numéricas (width, height, opacity, font-size) y colores.
transition-duration
Duración de una transición, este es el valor más importante; si no lo pones, la duración es 0 y no verás ninguna animación. Se define en segundos (s) o milisegundos (ms).
- transition-duration: 0.5s; (Medio segundo)
- transition-duration: 300ms; (Equivalente a 0.3s)
transition-timing-function
Esta propiedad define el ritmo de la transición, es decir establece cómo de rápido pasarían a calcularse las propiedades a las cuales se le aplicará el efecto.
- ease (Valor por defecto): Empieza lento, acelera en el medio y frena suavemente al final. Es un ritmo suave y natural.
- linear: Velocidad constante de principio a fin. Se siente un poco "robótico".
- ease-in: Empieza lento y acelera hasta el final (termina rápido). Como un coche que arranca.
- ease-out: Empieza rápido y desacelera hasta el final (termina lento). Es el que te expliqué antes, muy útil para interfaces porque responde al instante.
- ease-in-out: Similar a ease, pero simétrico. Empieza lento, acelera y termina lento.
- cubic-bezier(n, n, n, n): Te permite crear tu propia curva de aceleración personalizada. Es una función avanzada.
transition-delay
La propiedad transition-delay nos permite retrasar el inicio de la transición unos segundos. Si no especificamos nada en el transition-delay comenzaría de inmediato.
transition
Como siempre podemos resumir o atajar estas propiedades usando la propiedad transition que recoge todas ellas. transition: <property> <duration><timing-function><delay>.
a {
font-size: 2rem;
background-color: palegoldenrod;
transition: background-color 2s 500ms;
&:hover {
background-color: darkorange;
}
}El orden importa: El navegador es inteligente y sabe que el primer valor de tiempo que pones es la duración (duration) y el segundo valor de tiempo es el retraso (delay).
En la propiedad transition, podemos separar por comas varias propiedades que queremos transicionar, es decir, podríamos decir que para el hover del enlace queremos que el background-color cambie pero también podemos decirle que rote, cambie de tamaño, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de transiciones</title>
<link rel="stylesheet" href="1.Transiciones.css">
</head>
<body>
<h1>La Carrera de <code>timing-function</code></h1>
<p>Haz hover para ver los timing-function.</p>
<p>¡Córre plátano corre!</p>
<main>
<div class="runner" id="linear-box">linear</div>
<div class="runner" id="ease-box">ease</div>
<div class="runner" id="ease-in-box">ease-in</div>
<div class="runner" id="ease-out-box">ease-out</div>
<div class="runner" id="ease-in-out-box">ease-in-out</div>
</main>
</body>
</html>