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

bookElegir las Propiedades de Transición Adecuadas

Podemos especificar cualquier propiedad CSS como valor para la propiedad transition-property. Esto significa que podemos aplicar un efecto de transición a cualquier propiedad.

transition-property: ... /* any property */

Trabajemos con un par de propiedades típicas que suelen ser objeto de transición. Las propiedades transition-duration, transition-timing-function y transition-delay siempre permanecerán iguales. Todas las transiciones reaccionarán al pasar el cursor.

index.html

index.html

index.css

index.css

copy

Múltiples propiedades de transición

También se puede utilizar el valor all para la propiedad transition-property, lo que significa que todas las propiedades serán objeto de transición.

transition-property: all;

En el siguiente ejemplo se desea aplicar la transición a los cambios de las propiedades background-color, color, font-weight y font-size. Consultar el archivo index.css:

index.html

index.html

index.css

index.css

copy

Además, si necesitamos agregar una transición a varias propiedades pero no a todas, podemos establecerlas como valor para la propiedad transition-property, separándolas con espacios. Por ejemplo:

transition-property: color border height;

Esto significa que la transición se aplicará a las propiedades color, border y height.

question mark

¿Qué determina la propiedad transition-property?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 2

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 transition property does?

Can you show an example of how transitions look in practice?

What are some common use cases for CSS transitions?

Awesome!

Completion rate improved to 2.04

bookElegir las Propiedades de Transición Adecuadas

Desliza para mostrar el menú

Podemos especificar cualquier propiedad CSS como valor para la propiedad transition-property. Esto significa que podemos aplicar un efecto de transición a cualquier propiedad.

transition-property: ... /* any property */

Trabajemos con un par de propiedades típicas que suelen ser objeto de transición. Las propiedades transition-duration, transition-timing-function y transition-delay siempre permanecerán iguales. Todas las transiciones reaccionarán al pasar el cursor.

index.html

index.html

index.css

index.css

copy

Múltiples propiedades de transición

También se puede utilizar el valor all para la propiedad transition-property, lo que significa que todas las propiedades serán objeto de transición.

transition-property: all;

En el siguiente ejemplo se desea aplicar la transición a los cambios de las propiedades background-color, color, font-weight y font-size. Consultar el archivo index.css:

index.html

index.html

index.css

index.css

copy

Además, si necesitamos agregar una transición a varias propiedades pero no a todas, podemos establecerlas como valor para la propiedad transition-property, separándolas con espacios. Por ejemplo:

transition-property: color border height;

Esto significa que la transición se aplicará a las propiedades color, border y height.

question mark

¿Qué determina la propiedad transition-property?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

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