Siirtymien Mukauttaminen Ajoitustoiminnoilla
transition-timing-function määrittää siirtymäefektin nopeuskäyrän. Se määrittelee, kuinka nopeasti animaatio alkaa ja loppuu sekä etenemisnopeuden.
transition-timing-function: time_function;
Keskeiset avainsanat, jotka kuvaavat eri time_function-arvoja:
ease– Oletusarvo. Siirtymäefekti, jossa on hidas alku, nopea keskikohta ja hidas loppu;linear– Tasainen nopeus koko siirtymän ajan;ease-in– Siirtymäefekti, jossa on hidas alku;ease-out– Siirtymäefekti, jossa on hidas loppu;ease-in-out– Siirtymäefekti, jossa on hidas alku ja loppu sekä nopea keskikohta.
Tarkastellaan seuraavaa esimerkkiä, jotta nähdään niiden erot. Siirtymä toimii vain, kun container on hover-tilassa.
index.html
index.css
Cubic Bezier -käyrä
Voimme myös käyttää cubic-bezier()-funktiota luodaksemme mukautetun timing-function-arvon. Tämä funktio ottaa neljä arvoa, jotka edustavat cubic bezier -käyrän ohjauspisteitä ja määrittävät ajoitusfunktion muodon.
Huomio
Ei huolta. Matematiikan osaamista ei tarvita cubic bezier -funktion luomiseen css-ominaisuuden arvoksi. Voimme käyttää https://cubic-bezier.com/ -lähdettä mukautettujen funktioiden luomiseen.
Tarkastellaan seuraavaa esimerkkiä, jotta näemme kuinka helppoa käyttö on. cubic-bezier-funktio luotiin raahaamalla pisteitä kyseisessä lähteessä.
Tämän seurauksena voimme kopioida yllä olevan funktion css-tiedostoomme.
index.html
index.css
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain how to use the cubic-bezier function in a CSS transition?
What are some practical examples of using different timing functions?
How do I choose the best timing function for my animation?
Awesome!
Completion rate improved to 2.04Siirtymien Mukauttaminen Ajoitustoiminnoilla
Pyyhkäise näyttääksesi valikon
transition-timing-function määrittää siirtymäefektin nopeuskäyrän. Se määrittelee, kuinka nopeasti animaatio alkaa ja loppuu sekä etenemisnopeuden.
transition-timing-function: time_function;
Keskeiset avainsanat, jotka kuvaavat eri time_function-arvoja:
ease– Oletusarvo. Siirtymäefekti, jossa on hidas alku, nopea keskikohta ja hidas loppu;linear– Tasainen nopeus koko siirtymän ajan;ease-in– Siirtymäefekti, jossa on hidas alku;ease-out– Siirtymäefekti, jossa on hidas loppu;ease-in-out– Siirtymäefekti, jossa on hidas alku ja loppu sekä nopea keskikohta.
Tarkastellaan seuraavaa esimerkkiä, jotta nähdään niiden erot. Siirtymä toimii vain, kun container on hover-tilassa.
index.html
index.css
Cubic Bezier -käyrä
Voimme myös käyttää cubic-bezier()-funktiota luodaksemme mukautetun timing-function-arvon. Tämä funktio ottaa neljä arvoa, jotka edustavat cubic bezier -käyrän ohjauspisteitä ja määrittävät ajoitusfunktion muodon.
Huomio
Ei huolta. Matematiikan osaamista ei tarvita cubic bezier -funktion luomiseen css-ominaisuuden arvoksi. Voimme käyttää https://cubic-bezier.com/ -lähdettä mukautettujen funktioiden luomiseen.
Tarkastellaan seuraavaa esimerkkiä, jotta näemme kuinka helppoa käyttö on. cubic-bezier-funktio luotiin raahaamalla pisteitä kyseisessä lähteessä.
Tämän seurauksena voimme kopioida yllä olevan funktion css-tiedostoomme.
index.html
index.css
Kiitos palautteestasi!
