Transiciones en CSS

Interpolar un cambio de propiedad en el tiempo, solo sobre las propiedades baratas.

.button {
  transition: background-color 150ms ease-out,
              transform 150ms ease-out;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.panel {
  transition: opacity 200ms ease, visibility 200ms;
}

Cómo funciona

1. Nombra las propiedades en vez de usar all.
2. transform y opacity animan sin recalcular el layout.
3. Una duración corta y una curva ease-out se sienten ágiles.

Palabras clave y builtins usados aquí

• ms
• opacity
• px
• transform
• transition
• translateY
• visibility

El intento, en números

Líneas

16

Caracteres a escribir

238

Tokens

58

Ritmo de tres estrellas

90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 39 segundos.

Escribe este fragmento

Paso 1 de 8 en Movimiento y efectos; paso 11 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →