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.

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:

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.