✅ HTML5 - animacijos

Turinys

Animacijos yra tokie efektai kaip perėjimai, tačiau jų funkcionalumas pagerintas, nes yra daugiau galimybių kontroliuoti, ką galima padaryti, nes yra daugiau galimybių keisti stilių į kitą.
Animacijos savybės
Kaip jau minėjome anksčiau, animacijos yra patobulinti perėjimai dėl daugybės parinkčių ir savybių, leidžiančių geriau jas valdyti, apžvelgsime kiekvieną iš jų:

animacija-uždelsimas: Taikykite tam tikrą laiką, kad galėtumėte paleisti animaciją, kai ji bus suaktyvinta.
animacijos kryptis: Nurodo, ar animacija turėtų būti rodoma atgal, ar pakaitomis.
animacijos trukmė: Nurodo laiko intervalą, kuriuo animacija turėtų būti paleista.
animacijos-iteracijų skaičius: Nurodo, kiek kartų animacija turi būti kartojama, ir netgi gali nustatyti vertę begalinis begaliniams to paties kartojimams.
animacijos pavadinimas: Nurodo animacijos pavadinimą.
animacijos-žaidimo būsena: Leidžia animaciją pristabdyti ir toliau leisti.
animacijos laiko nustatymo funkcija: Nurodykite, kaip animacijoje turi būti traktuojamos tarpinės vertės
animacija: Tai yra spartusis klavišas, kuriuo mes galime įtraukti visas animacijos ypatybes į vieną CSS deklaraciją ir turi tokią struktūrą:

animacija:
Dabar, kai žinome galimas ypatybes, pažiūrėkime kodo pavyzdį, kad jį išanalizuotume:

Pavyzdys

Yra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.

Šiame pavyzdyje matome, kad tai darome : slinkite ant elemento turėsime 100 ms vėlavimą, tada animacija turės atlikti 500 ms ir ji bus kartojama begalę kartų.
Tada matome, kad naudodami pavadinimą, kurį davėme paraiškai, mes naudosime turtą @rakto kadrai kur mes jums pasakysime, kurie elementai bus animuoti.
Pažiūrėkime, kaip tai turėtų atrodyti mūsų naršyklėje:

DIDELIS

Kaip matome, pasikeičia elemento fonas, tada raidės spalva ir šrifto dydis, animacijos pabaigoje jis grįžta į pradinę būseną ir visas šis procesas kartojamas dar kartą. judėjimas, kuris neegzistuoja naudojant perėjimus.
Tuo mes taip pat parodome animacijos pavadinimo svarbą, nes jis veikia kaip identifikatorius, kad būtų galima jį priskirti a @rakto kadrai.
Baigę vadovėlį, mes jau galime atlikti pagrindines animacijas, kad mūsų dokumentai būtų judresni HTML.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką