Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Combinando Transiciones | Creación de Transiciones Suaves en CSS
Técnicas Avanzadas de CSS

bookCombinando Transiciones

Podemos combinar todas las propiedades relacionadas con las transiciones en una sola línea.

transition: <property> <time> <time_function> <delay>;

Supongamos que necesitamos agregar una propiedad de transición al elemento. Se espera:

  • el cambio de la propiedad background-color;
  • la duración del tiempo es 1.2s;
  • la función de tiempo debe ser ease-in-out;
  • el retraso es 250ms.

Forma larga

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Forma abreviada

transition: background-color 1200ms ease-in-out 250ms;

Nota

No existe ninguna diferencia en la sintaxis para el navegador. Podemos seleccionar cualquier opción que prefiramos.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 6

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain what each part of the shorthand transition property does?

Are there other properties besides background-color that can be transitioned?

Why would I use the shorthand form instead of the long form?

Awesome!

Completion rate improved to 2.04

bookCombinando Transiciones

Desliza para mostrar el menú

Podemos combinar todas las propiedades relacionadas con las transiciones en una sola línea.

transition: <property> <time> <time_function> <delay>;

Supongamos que necesitamos agregar una propiedad de transición al elemento. Se espera:

  • el cambio de la propiedad background-color;
  • la duración del tiempo es 1.2s;
  • la función de tiempo debe ser ease-in-out;
  • el retraso es 250ms.

Forma larga

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Forma abreviada

transition: background-color 1200ms ease-in-out 250ms;

Nota

No existe ninguna diferencia en la sintaxis para el navegador. Podemos seleccionar cualquier opción que prefiramos.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 6
some-alt