Home-theater-designers
CSS suteikia kūrėjams galimybę atgaivinti savo tinklalapius naudojant raktinių kadrų animaciją.
CSS animacija pasiekiama keičiant pradinę HTML elemento būseną per įvairias jo savybes. Kai kurios bendros CSS ypatybės, kurias galima animuoti, yra šios:
kaip ištrinti įvykius „iPhone“ kalendoriuje
- Plotis
- Aukštis
- Pozicija
- Spalva
- Neskaidrumas
Šios bendros CSS savybės yra manipuliuojamos konkrečiais CSS elementais, kad būtų sukurtas norimas rezultatas. Jei tinklalapyje kada nors susidūrėte su animaciniu elementu, tikėtina, kad elementas buvo animuotas naudojant raktinių kadrų animaciją.
Kas yra „Keyframes“ elementas?
The raktų kadrų elementas gali būti naudojamas viename ar daugiau HTML elementų, prie kurių jis turi prieigą. Jis nustato konkretų elemento būsenos tašką ir nurodo šio elemento išvaizdą šiuo metu.
Tai gali atrodyti daug virškinama, bet iš tikrųjų tai gana paprasta. The raktų kadrų elementas turi gana paprastą struktūrą, kurią galima lengvai suprasti ir pritaikyti prie bet kokių animacijos reikalavimų.
Pagrindinių kadrų struktūros pavyzdys
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}Tarkime, norite animuoti žalią stačiakampį mygtuką, paversdami jį mėlynu apvaliu mygtuku.
Pagal parametrus nuo aukščiau esančiame skyriuje turėsite įdėti visą reikalingą stilių, kad elementas atrodytų kaip žalias stačiakampis mygtukas, tada į skyriuje, pateiksite visus stiliaus reikalavimus, kad šis mygtukas taptų mėlynu apvaliu mygtuku.
Jei galvojate, tai nelabai skamba kaip animacija. Na, taip yra todėl, kad pagrindinis viso šio proceso komponentas dar turi būti pristatytas --- šis komponentas yra animacijos savybė.
Animacinis turtas
The animacijos savybė turi įvairių sub-savybių rinkinį; jie naudojami kartu su aukščiau esančių raktų kadrų struktūra norimam HTML elementui pagyvinti.
Tačiau, norint pasiekti savo projektų animaciją, jums reikia žinoti tik penkias iš šių nuosavybių ir su jomis susijusias vertybes. Šios savybės yra žinomos kaip:
- Animacijos pavadinimas
- Animacijos trukmė
- Animacijos laiko nustatymo funkcija
- Animacija-uždelsimas
- Animacijos-iteracijų skaičius
Animacijos naudojimas tinklalapyje
Naudojant aukščiau pateiktą scenarijų, tikslas yra sukurti animuotą mygtuką.
Mygtuko animacijos pavyzdys
Animation
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
Click!
Ankstesniame kodo animacijos skyriuje yra penkios anksčiau minėtos papildomos savybės. Kiekviena nuosavybė turi labai skirtingą funkciją ir kartu dirba, kad atgaivintų bet kurį HTML elementą, pagal kurį jie yra skirti.
Susiję: Kaip taikyti pagal tinklalapio dalį naudojant CSS parinkiklius
Animacijos pavadinimo nuosavybė
Ši nuosavybė yra vienintelė svarbiausia nuosavybė sąraše. Be animacijos pavadinimo nuosavybė , neturėtumėte identifikatoriaus, kurio būtų galima praeiti raktų kadrų elementas , todėl visas jo parametrų kodas yra nenaudingas.
Jei pamiršote įtraukti vieną ar dvi kitas nuosavybes, vis tiek galite turėti gana neblogą animaciją. Tačiau, jei pamiršote animacijos pavadinimo nuosavybė jūs neturėtumėte animacijos.
Animacijos trukmės nuosavybė
Ši savybė naudojama apibrėžti, kiek laiko animuotas elementas turėtų užtrukti pereinant iš vienos būsenos į kitą.
Aukščiau pateiktame pavyzdyje animacijos trukmės nuosavybė yra nustatytas į 5 sekundes (5 s), todėl žalias stačiakampis mygtukas iš viso turės 5 sekundes, kol jis visiškai taps mėlynu apvaliu mygtuku.
Animacijos uždelsimo ypatybė
Ši savybė yra svarbi dėl vienos priežasties; kai kuriems tinklalapiams visiškai įkelti gali prireikti kelių sekundžių (dėl kelių skirtingų veiksnių). Taigi animacijos uždelsimo ypatybė neleidžia animacijai paleisti iš karto, tik tuo atveju, jei tinklalapis įkeliamas šiek tiek laiko.
Aukščiau pateiktame pavyzdyje animacijos uždelsimo ypatybė yra nustatytas į 4s, o tai reiškia, kad animacija prasidės tik praėjus 4 sekundėms po tinklalapio aplankymo (suteikiant tinklalapiui pakankamai laiko įkelti iki animacijos pradžios).
Animacijos-iteracijų skaičiaus nuosavybė
Ši savybė nurodo, kiek kartų animuotas elementas turėtų pereiti iš vienos būsenos į kitą. The animacijos-iteracijų skaičiaus ypatybė priima vertes, kurios yra žodžiai ir skaičiai. Skaičiaus reikšmė gali būti bet kokia, pradedant nuo 1, o žodžio reikšmė paprastai yra begalinis .
Aukščiau pateiktame pavyzdyje animacijos-iteracijų skaičiaus reikšmė yra nustatytas į begalinis , o tai reiškia, kad tol, kol tinklalapis bus aukštyn, mygtuko ypatybė bus nuolat animacija iš vienos būsenos į kitą.
Animacijos laiko nustatymo funkcijos ypatybė
Ši savybė diktuoja animacinio elemento judėjimą, kai jis pereina iš vienos būsenos į kitą. The animacijos laiko nustatymo funkcijos ypatybė paprastai priskiriama viena iš trijų lengvumo verčių.
- Lengvumas
- Lengvumas
- Lengvas išėjimas
The lengvai įleidžiama vertė yra naudojamas aukščiau; tai lėtai perkelia animaciją iš vienos būsenos į kitą. Jei tikslas yra sukurti lėtą perėjimą, kai mygtukas iš žalio stačiakampio virsta mėlynu apskritimu, naudokite lengvumo vertę . Jei norėtumėte tik lėto perėjimo priešinga kryptimi, naudokite lengvumo vertė .
Mūsų kodekso sumažinimas
Daugeliu atvejų programos trukmės sutrumpinimas laikomas praktiniu požiūriu. Taip yra daugiausia todėl, kad mažiau kodo eilučių sumažina tikimybę, kad jūsų programose nepastebės klaidų.
Aukščiau pateiktą kodą galima sutrumpinti keturiomis eilutėmis. Tai galima pasiekti tiesiog naudojant animacijos ypatybę, aiškiai nenurodant kiekvienos jos papildomos savybės.
Mygtuko animacijos pavyzdžio kodo sumažinimas
Animation
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}