Tranziții CSS. Modificarea mai multor valori ale proprietății. Specificarea curbei de viteză a tranziției. Proprietatea transition-timing-function.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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;}