Tranziții CSS. Modificarea mai multor valori ale proprietății. Specificarea curbei de viteză a tranziției. Proprietatea transition-timing-function.

Modificați mai multe valori ale proprietății

Următorul exemplu adaugă un efect de tranziție atât pentru proprietatea lățimii (width), cât și pentru înălțime (height), cu o durată de 2 secunde pentru lățime (width) și 4 secunde pentru înălțime (height):

Exemplu:

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

Specificați curba de viteză (speed curve) a tranziției

Proprietatea transition-timing-function specifică curba de viteză (speed curve) a efectului de tranziție.

Proprietatea transition-timing-function poate avea următoarele valori:
 

• ease - specifică un efect de tranziție cu început lent, apoi rapid, apoi sfârșit lent (acest lucru este implicit)
• linear - specifică un efect de tranziție cu aceeași viteză de la început până la sfârșit
• ease-in - specifică un efect de tranziție cu pornire lentă
• ease-out - specifică un efect de tranziție cu sfârșit lent
• ease-in-out - specifică un efect de tranziție cu început și sfârșit lent
• cubic-bezier(n,n,n,n) - vă permite să definiți propriile valori într-o funcție cub-bezier

Următorul exemplu arată câteva dintre diferitele curbe de viteză (speed curve) care pot fi utilizate:

Exemplu:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}