Ta članek prikazuje postopek dodajanja večstopenjskih animacij in prehodov.
Kako uporabljati večstopenjske animacije in prehode?
Za izdelavo večstopenjske animacije se ustvari niz ključnih sličic. Določa vrsto sprememb, ki naj bodo uporabljene za izbrani element HTML. Vsak ključni okvir predstavlja drugačno stanje animacije in brskalnik gladko prehaja element med temi stanji. Med prehodi določite nemoteno spreminjanje lastnosti CSS v določenem času z uporabniškimi interakcijami ali spremembami stanja.
Oglejmo si praktičen primer za boljše razumevanje:
Primer 1: Uporaba večstopenjske animacije
V tem primeru bo večstopenjska animacija uporabljena za izbrani element HTML. Obiščite spodnjo predstavitev:
< stil >
.animationExample {
širina: 130px;
višina: 130px;
barva ozadja: gozdno zelena;
položaj: relativni;
animacija: neskončno premikanje Animate 4s enostavnost vstopanja in izstopanja;
}
< / stil >
< telo >
< div razred = 'animationExample' >< / div >
< / telo >
V zgornjem delčku kode:
- Najprej razred z imenom ' animationExample « je izbran znotraj »
' oznaka. - Nato so vrednosti ' 130 slikovnih pik « so dodeljeni » višina « in » premer ” lastnosti.
- Poleg tega nastavite ' gozdnozelen « in » relativno « kot vrednost za » Barva ozadja « in » položaj ” lastnosti za izboljšanje vizualizacije.
- Po tem uporabite » animacija ' lastnost in jo nastavite na ' MoveAnimate 4s neskončno olajšanje ” za uporabo animacij.
- Vrednost je sestavljena iz štirih delov, prvi je animacija imena po meri, drugi je časovno trajanje za dokončanje, tretji je vrsta animacije in četrti je omejitev, kolikokrat se bo ta animacija uporabila.
- Na koncu ustvarite element HTML in mu dodelite » animationExample ” razred k temu.
Zdaj uporabite » ključne sličice »pravilo za definiranje po meri« premakniAnimate ” animacija:
@ ključne sličice moveAnimate {0 % {
levo: 0 ;
barva ozadja: modra;
}
petdeset % {
levo: 200px;
barva ozadja: gozdno zelena;
transformacija: vrtenje ( 180 stopinj ) ;
}
100 % {
levo: 0 ;
barva ozadja: modra;
}
}
V zgornjem kodnem bloku:
- Prvič, ' @keyframes ” se ustvari blok skupaj z imenom animacije po meri, ki bo definirana.
- Nato ustvarite blok z imenom ' 0 % «, ki na začetku animacije uporabi sloge CSS. In uporabite ' Barva ozadja « in » levo Lastnosti CSS.
- Zdaj ustvarite blok z imenom in ' petdeset % ” za stil sredi animacije. Zagotavlja vrednosti ' 200 slikovnih pik ”, “ gozdnozelen « in » zasukaj (180 stopinj) ” na lastnosti “levo”, “barva ozadja” in “transformacija”. To omogoča, da se izbrani element zasuka v levo za 200 slikovnih pik.
Po prevajanju zgornjega bloka kode:
Izhod pokaže, da je bila animacija v več korakih uporabljena za izbrani element HTML.
Primer 2: Uporaba večstopenjskega prehoda
Za uporabo večstopenjskega prehoda lahko uporabite izbirnike CSS skupaj z ' prehod ” lastnina. Obiščite spodnjo kodo:
.fade {
motnost: 1;
prehod: motnost 1s;
}
.fade:hover {
motnost: 0;
}
<
/ slog>
<
telo>
< str razred = 'zbledi' > Premaknite miško, da vidite prehod. < / str >
< / telo >
Razlaga zgornje kode:
- Prvič, običaj ' zbledi ' je izbran razred in vrednost 1 je zagotovljena za ' nepreglednost ” lastnina. Nastavite tudi vrednost ' motnost 1s ' do ' prehod Lastnost CSS. To nastavi ali odstrani motnost v časovnem obdobju ' 1s ”.
- Nato je ' :lebdi Izbirnik je dodeljen elementu zbledi ” razred. V njem je vrednost ' 0 ” je nastavljena na lastnost motnosti.
- Na koncu se element HTML ustvari znotraj »
' in razred ' zbledi ” je priloženo.
Po koncu faze prevajanja je spletna stran videti takole:
GIF prikazuje, da je bil prehod po meri uporabljen za izbrani element HTML.
Zaključek
Večstopenjske animacije in prehodi oživijo spletne strani HTML z dodajanjem gibanja in vizualnih učinkov. Za animacijo je ' ključne sličice « se uporabljajo skupaj z odstotkom trajanja, kot je » 0 % 'je začetek,' petdeset % ' je sredina in ' 100 % ” je konec trajanja animacije. Za prehod lahko uporabite izbirnik CSS skupaj z ' prehod ” razred. Ta članek je prikazal postopek uporabe večstopenjskih animacij in prehodov.