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?
Genial!
Completion tasa mejorada a 2.08Combinando 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!
