animationĪpašums CSS var izmantot, lai dzīvās daudzām citām CSS īpašības, piemēram color, background-color, height, vai width. Katra animācija ir jādefinē ar @keyframesat-likumu, kas pēc tam tiek izsaukts ar animationrekvizītu, piemēram:
.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )Katrs @keyframesnoteikums nosaka, kam jānotiek konkrētos animācijas brīžos. Piemēram, 0% ir animācijas sākums un 100% ir beigas. Šos atslēgkadrus pēc tam var kontrolēt vai nu ar stenogrāfijas animationrekvizītu, vai ar tā astoņām apakšīpašībām, lai vairāk kontrolētu, kā ar šiem atslēgkadriem jārīkojas.
Apakšīpašības
animation-name: paziņo par@keyframesmanipulējamā likuma nosaukumu .animation-duration: laiks, kas vajadzīgs, lai animācija pabeigtu vienu ciklu.animation-timing-function: izveido iepriekš iestatītas paātrinājuma līknes, piemēram,easevailinear.animation-delay: laiks starp elementa ielādi un animācijas secības sākumu (forši piemēri).animation-direction: nosaka animācijas virzienu pēc cikla. Tā noklusējums tiek atiestatīts katrā ciklā.animation-iteration-count: animācijas veikšanas reižu skaits.animation-fill-mode: nosaka vērtības, kas tiek lietotas pirms / pēc animācijas.
Piemēram, varat iestatīt, lai pēdējais animācijas stāvoklis paliek ekrānā, vai arī varat to pārslēgties atpakaļ pirms animācijas sākuma.animation-play-state: pauzē / atskaņo animāciju.
Pēc tam šīs apakšīpašības var izmantot šādi:
@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )Šeit ir pilns saraksts ar vērtībām, kuras katram no šiem apakšīpašumiem var būt:
animation-timing-function | vieglums, vieglums ārā, vieglums iekšā, vieglums iekšā, lineārs, kubiskais bezieris (x1, y1, x2, y2) (piemēram, kubiskais bezieris (0,5, 0,2, 0,3, 1,0)) |
animation-duration | Xs vai Xms |
animation-delay | Xs vai Xms |
animation-iteration-count | X |
animation-fill-mode | uz priekšu, atpakaļ, abi, neviens |
animation-direction | normāli, aizstājēji |
animation-play-state | pauze, skriešana, skriešana |
Vairāki soļi
Ja animācijai ir vienādas sākuma un beigu īpašības, ir lietderīgi komatā atdalīt 0% un 100% vērtības iekšpusē @keyframes:
@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )Vairākas animācijas
Vērtības var atdalīt ar komatu, lai atlasītājā deklarētu arī vairākas animācijas. Tālāk sniegtajā piemērā mēs vēlamies mainīt apļa krāsu, @keyframevienlaikus arī to nobīdot no vienas puses uz otru.
.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )Izrāde
Lielākās daļas animēšana rada bažas par veiktspēju, tāpēc pirms jebkura īpašuma animācijas mums jārīkojas piesardzīgi. Tomēr ir dažas kombinācijas, kuras var droši animēt:
transform: translate()transform: scale()transform: rotate()opacity
Kuras īpašības var animēt?
MDN ir CSS rekvizītu saraksts, kurus var animēt. Animatizējamās īpašības mēdz būt krāsas un skaitļi. Īpašums, kas nav animējams, ir background-image.
Pārlūkprogrammas atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5,1 * |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4 * | 6,0–6,1 * |
Vairāk informācijas
- animācija MDN
- CSS animāciju izmantošana
- animācija vietnē W3C
- Jank busting labākai renderēšanas veiktspējai
- Tīmekļa animācija darbā
- Pieci veidi, kā animēt atbildīgi
- Valsts lekt, negatīvas kavēšanās, izcelsmes animēšana un citas darbības
- Sākot CSS animācijas pusceļā
- Augstas veiktspējas animācijas
