Voimme yhdistää kaikki siirtymään liittyvät ominaisuudet yhdelle riville.

transition: <property> <time> <time_function> <delay>;

Kuvitellaan, että meidän täytyy lisätä transition-ominaisuus elementtiin. Odotamme:

• background-color-ominaisuuden muutosta;
• keston olevan 1.2s;
• aikafunktion olevan ease-in-out;
• viiveen olevan 250ms.

Pitkä muoto

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Lyhyt muoto

transition: background-color 1200ms ease-in-out 250ms;

Huomio

Selaimen kannalta syntaksissa ei ole eroa. Voimme valita minkä tahansa vaihtoehdon, josta pidämme enemmän.