Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Escolhendo as Propriedades de Transição Corretas | Criando Transições Suaves em CSS
Técnicas Avançadas de CSS

bookEscolhendo 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy

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.

question mark

O que a propriedade transition-property determina?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 2

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

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

bookEscolhendo 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy

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.

question mark

O que a propriedade transition-property determina?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 2
some-alt