Combinando Transições
Podemos combinar todas as propriedades relacionadas à transição em uma única linha.
transition: <property> <time> <time_function> <delay>;
Suponha que seja necessário adicionar uma propriedade de transição ao elemento. Espera-se:
- a alteração da propriedade
background-color; - duração de tempo de
1.2s; - função de tempo
ease-in-out; - atraso de
250ms.
Forma longa
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;
Observação
Não há diferença de sintaxe para o navegador. Podemos selecionar qualquer opção que preferirmos.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
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 Transições
Deslize para mostrar o menu
Podemos combinar todas as propriedades relacionadas à transição em uma única linha.
transition: <property> <time> <time_function> <delay>;
Suponha que seja necessário adicionar uma propriedade de transição ao elemento. Espera-se:
- a alteração da propriedade
background-color; - duração de tempo de
1.2s; - função de tempo
ease-in-out; - atraso de
250ms.
Forma longa
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;
Observação
Não há diferença de sintaxe para o navegador. Podemos selecionar qualquer opção que preferirmos.
Obrigado pelo seu feedback!
