Ako používať viackrokové animácie a prechody?

Viackrokové animácie a prechody vo webovom dizajne využívajú kľúčové snímky a prechody CSS na vytvorenie vizuálne príťažlivých a dynamických efektov. Zlepšuje používateľskú skúsenosť a záujem pridaním pohybu, interaktivity a vizuálneho záujmu na web. Môžu byť použité pre prezentácie a galérie obrázkov, prechody stránok, načítavanie, interakcie s kurzorom a klikaním atď.

Tento článok ukazuje proces pridávania viackrokových animácií a prechodov.

Ako používať viackrokové animácie a prechody?

Na vytvorenie viackrokovej animácie sa vygeneruje séria kľúčových snímok. Špecifikuje sériu zmien, ktoré sa majú použiť na vybraný prvok HTML. Každá kľúčová snímka predstavuje iný stav animácie a prehliadač plynulo prechádza prvok medzi týmito stavmi. Počas prechodov zadajte plynulú zmenu vlastností CSS počas určeného trvania interakciami používateľa alebo zmenami stavu.

Pre lepšie pochopenie si prejdeme praktický príklad:

Príklad 1: Aplikácia viackrokovej animácie
V tomto príklade sa na vybraný prvok HTML použije viackroková animácia. Navštívte nižšie uvedenú ukážku:

< štýl >
.animationExample {
šírka: 130px;
výška: 130px;
farba pozadia: lesná zelená;
poloha: relatívna;
animácia: moveAnimate 4s easy-in-out infinite;
}
< / štýl >
< telo >
< div trieda = 'príklad animácie' < / div >
< / telo >

Vo vyššie uvedenom útržku kódu:

Najprv trieda s názvom „ animáciaPríklad “ je vybraté v rámci „