Tranziții CSS. Întârzie efectul de tranziție. Proprietatea transition-delay. Tranziție + transformare. Proprietatea shorthand transition.

Întârzie efectul de tranziție (Delay the Transition Effect)

Proprietatea transition-delay specifică o întârziere (în secunde) pentru efectul de tranziție.

Următorul exemplu are o întârziere de 1 secundă înainte de a începe:

Exemplu:

div {
  transition-delay: 1s;
}

Tranziție + transformare (Transition + Transformation)

Următorul exemplu adaugă un efect de tranziție la transformare:

Exemplu:

div {
  transition: width 2s, height 2s, transform 2s;
}

Mai multe exemple de tranziție

Proprietățiile CSS transition pot fi specificate una câte una, astfel:

Exemplu:

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

sau folosind proprietatea shorthand transition:

Exemplu:

div {
  transition: width 2s linear 1s;
}