Escolhendo as Propriedades de Transição Corretas
Podemos especificar qualquer propriedade CSS como valor para a propriedade transition-property. Isso significa que podemos aplicar o efeito de transição a qualquer propriedade.
transition-property: ... /* any property */
Vamos trabalhar com algumas propriedades típicas que são utilizadas em transições. As propriedades transition-duration, transition-timing-function e transition-delay sempre permanecerão as mesmas. Todas as transições reagirão ao passar o cursor.
index.html
index.css
Múltiplas propriedades de transição
Também é possível utilizar o valor all para a propriedade transition-property, o que significa que todas as propriedades serão animadas.
transition-property: all;
No exemplo a seguir, desejamos animar as mudanças das propriedades background-color, color, font-weight e font-size. Consulte o arquivo index.css:
index.html
index.css
Além disso, caso seja necessário adicionar uma transição a várias propriedades, mas não a todas, é possível defini-las como valor da propriedade transition-property, separando-as por espaço. Por exemplo:
transition-property: color border height;
Isso significa que a transição será aplicada às propriedades color, border e height.
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 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.04Escolhendo as Propriedades de Transição Corretas
Deslize para mostrar o menu
Podemos especificar qualquer propriedade CSS como valor para a propriedade transition-property. Isso significa que podemos aplicar o efeito de transição a qualquer propriedade.
transition-property: ... /* any property */
Vamos trabalhar com algumas propriedades típicas que são utilizadas em transições. As propriedades transition-duration, transition-timing-function e transition-delay sempre permanecerão as mesmas. Todas as transições reagirão ao passar o cursor.
index.html
index.css
Múltiplas propriedades de transição
Também é possível utilizar o valor all para a propriedade transition-property, o que significa que todas as propriedades serão animadas.
transition-property: all;
No exemplo a seguir, desejamos animar as mudanças das propriedades background-color, color, font-weight e font-size. Consulte o arquivo index.css:
index.html
index.css
Além disso, caso seja necessário adicionar uma transição a várias propriedades, mas não a todas, é possível defini-las como valor da propriedade transition-property, separando-as por espaço. Por exemplo:
transition-property: color border height;
Isso significa que a transição será aplicada às propriedades color, border e height.
Obrigado pelo seu feedback!
