Combinando 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.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
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.04Combinando 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.
¡Gracias por tus comentarios!
