Animații CSS. Precizarea curbei de viteză a animației. Proprietatea animation-timing-function. Valori: ease, linear, ease-in , ease-out , ease-in-out, cubic-bezier(n,n,n,n).
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Proprietatea animation-timing-function specifică curba de viteză (speed curve) a animației.
Proprietatea animation-timing-function poate avea următoarele valori:
- ease - Specifică o animație cu început lent, apoi rapid, apoi sfârșit încet (aceasta este implicit)
- linear - Specifică o animație cu aceeași viteză de la început până la sfârșit
- ease-in - Specifică o animație cu pornire lentă
- ease-out - Specifică o animație cu sfârșit lent
- ease-in-out - Specifică o animaț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 cubic-bezier
Următorul exemplu arată câteva dintre diferitele curbe de viteză (speed curve) care pot fi utilizate:
Exemplu:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}