ja ongi kõik! Vaatame, kuidas see tegelikkuses välja näeb.

Algul HTML märgistus. See on väga lihtne, sest me töötame ainult ühe elemendiga lehel.

1	<div klass = "toSmallWidth" >

Ja siin on see, mis stiilifailis on:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (veeris: 20px auto; /*välised veerised 20 piksli üla- ja alaosas ning joondus keskel*/ taust:punane; /*ploki punane taust*/ kõrgus: 100 pikslit; /*ploki kõrgus 100 pikslit*/ laius: 800 pikslit; /*alglaius 800 pikslit*/-veebikomplekti-animatsiooni nimi : animWidthSitehere; -veebikomplekti animatsiooni kestus: 5 s; /* atribuut eesliitega for Chrome'i brauserid, Safari, Opera */ animatsiooni nimi : animWidthSitehere;/* märkige võtmeraamide nimi (asub allpool)*/ animatsiooni kestus: 5 s; } /*animatsiooni kestuse määramine*/ /* eesliitega võtmekaadrid Chrome'i, Safari ja Opera brauserite jaoks */@-webkit-keyframes animWidthSitehere ( alates (laius: 800 pikslit;) kuni (laius: 100 pikslit;))@keyframes animWidthSitehere ( alates (laius: 800 pikslit;) /* esiteks võtme raam, kus ploki laius on 800 pikslit*/ /*viimane võtmekaader, kus ploki laius on 100 pikslit*/ }

Nagu näete, määrasime ainult esimese ja viimase võtmeraami ning kõik vahepealsed "ehitati" automaatselt.

Teie esimene CSS3 animatsioon on valmis. Saadud teadmiste kinnistamiseks loo HTML dokument Ja CSS-fail ja sisestage sinna (a parem oma kätega print) näite kood. Siis saad kindlasti kõigest aru. Seejärel proovige sama ploki kõrgusega (see peaks kõrguselt vähenema), et materjal kinnitada.

3. Keerulisemad CSS3 animatsiooni näited

Eespool õppisite, kuidas hõlpsasti CSS3 animatsiooni luua. Kui proovisite seda oma kätega teha, siis mõistate juba kogu protsessi ja nüüd soovite teada saada, kuidas saate luua keerukama ja ilus animatsioon. Ja seda on tõesti võimalik luua. Allpool on 3 õppetundi, kus animatsioon luuakse samamoodi nagu ülaltoodud näites.

3 õppetundi CSS-animatsiooni kohta (transformatsioonid)

Tunnid aitavad teil animatsioonist aru saada CSS rohkem parem. Peaasi on püüda tundides nähtut korrata. Või proovige vähemalt vara väärtusi muuta ja vaadake, mis juhtub, siis kardate CSS-i vähem.

TÄHELEPANU! Kuna selles õppetükis analüüsime animatsiooni, ei saa ma teile selle töö näidet piltidel näidata, seega avage julgelt koodiredaktor ja kirjutage sinna selles artiklis antud kood.

Loomise põhitõed

Nii et kõigepealt peate alustama sellest, kuidas seda luua. Tõenäoliselt olete harjunud, et mis tahes CSS-i asja rakendatakse, määrates soovitud valijale vajalikud omadused koos vastavate väärtustega. Nii et animatsiooni loomisel sellest ei piisa. Diagramm näeb välja selline:

Üleminekuefektid ise luuakse @keyframes abil

Vajalikule elemendile antakse sama animatsioon ja ka selle parameetrid (kõik see atribuutide ja nende väärtuste abil).

Niisiis, kõigepealt peame kirjeldama vajalikke muudatusi@keyframesis vaatame lähemalt, kuidas nendega töötada.

@keyframes süntaks

Tegelikult on mul lihtsam teile kõike selgitada valmis näide, kuigi väga lihtne. Siin see on (kood lisatakse css-faili):

@keyframes impulss(0%(fondi suurus: 50px;) 50%(fondi suurus: 60px;)) 100%(fondi suurus: 50px;))

@keyframes impulss ( 0% (fondi suurus: 50 pikslit;) 50% (fondi suurus: 60 pikslit;))

Seega on märksõna @keyframes järel suvaline sõna, mis toimib animatsiooni nimena. Meie puhul on see "pulss". Järgmine avatud traksid, milles nad kirjutavad vajalikud reeglid.

Protsendid on niinimetatud ajatemplid, mille korral elemendile lisatakse määratud omadused. Meie puhul tähendab kirjutatu järgmist: täitmise alguses on fondi suurus 50 pikslit, keskel suureneb see 60-ni ja lõpus väheneb taas algsuuruseni.

Märksõnad from ja to võivad asendada protsendimärke, mis näitavad vastavalt 0% ja 100%, see tähendab taasesituse algust ja lõppu.

Animatsiooni rakendamine

Praegu on meil lihtsalt kood, mis genereerib animatsiooniefekti, kuid seda ei kasutata kusagil. Kui värskendate oma veebilehte, ei muutu midagi. Seetõttu peate animatsiooni rakendamiseks tegema kaks sammu:

Valige element, millele seda rakendatakse

Linkige see @keyframes kaudu kirjeldatud reeglitega (nime kaudu) ja määrake ka lisaseaded kui vaja.

Proovime

Oma html-failis lõin ploki variklassiga, mis sisaldab lihtne string tekst. Meie eesmärk on kandideerida animatsiooniefektid, mida me varem kirjeldasime, sellele tekstielement.

Selleks, et kõik toimiks, tuleb sel juhul täpsustada kaks nõutavat omadust. Esiteks, see on nimi, mille me võtmekaadritesse kirjutasime. Teiseks on see animatsiooni kestus, sest ilma selle parameetrita ei saa brauser seda lihtsalt esitada.

Nii et lisaks meie plokis juba olemasolevatele stiilidele lisame uusi:

animatsiooni nimi: pulss; animatsiooni kestus: 2s;

Seega korratakse kõike 4 korda ja seejärel lõpetatakse. Nagu aru saate, võite nelja asemel sisestada mis tahes numbri.

Lõputu animatsioon css3-s

Rakendatav väga lihtsalt, kasutades sama omadust. Tegelikult saate lihtsalt korduste arvuks seada paar tuhat, sellest piisab, kuid teoreetiliselt ei kordu meie animatsioon lõputult.

animatsiooni iteratsiooni arv: lõpmatu;

animatsioon - iteratsioon - arv: lõpmatu;

See on kõik, nüüd oleme teinud lõputu korduse. Ma ei soovita pärast terve elu monitori taga istumist kontrollida, kas see on tõsi. Seda kasutatakse lihtsalt juhtudel, kui soovite, et efekt korduks pidevalt ega kaoks. Kui see on pealetükkimatu ja kasutaja tähelepanu ei sega, siis miks mitte.

Viivitus enne starti

Vaikimisi algab taasesitus pärast täiskoormus lehekülgi. Seda käitumist saab juhtida atribuudi animatsiooni viivituse abil. Selle väärtus määratakse sekundites.

Suund

Veel üks huvitav omadus on animatsiooni suund. Vaikimisi on see seatud normaalseks, kui panete selle vastupidiseks, siis käivitatakse kõik kirjeldatud kaadrid vastupidine suund. Vaatame, mis vahe on. Selleks muutsin efekti veidi, lisades veel ühe raami.

@keyframes impulss(0%(fondi suurus: 50px;) 50%(fondi suurus: 60px;) 70%(fondi suurus: 80px;) 100%(fondi suurus: 50px;))

@keyframes impulss ( 0% (fondi suurus: 50 pikslit;) 50% (fondi suurus: 60 pikslit;) 70% (fondi suurus: 80 pikslit;) 100% (fondi suurus: 50 pikslit;))

Niisiis suureneb fondi suurus animatsiooni esimeses pooles tavalise suuna korral 60 pikslini, seejärel suureneb see uuesti järsult 80-ni, misjärel naaseb lähtepositsioon.

Riis. 2. Algne suurus tekst

Riis. 3. Fondi suurus on peaaegu animatsiooni lõpus, enne kui see naaseb järsult algsesse olekusse.

Nüüd küsime:

animatsiooni suund: tagurpidi;

animatsioon - suund: tagurpidi;

Kõik pöördus pea peale. Esiteks suureneb tekst koguni 30 piksli võrra, kuni 80 pikslit, ja ülejäänud animatsiooni puhul väheneb see järk-järgult, naases lõpuks endisele suurusele. See on lihtne.

Animatsiooni vorm

Ja see on võib-olla üks kõige enam huvitavad seaded, katsetes, millega saate kanda pikka aega. Vaikimisi tehakse kõik muudatused sama kiirusega. Seda tüüpi animatsioone nimetatakse lineaarseks ja peale selle on ka teisi.

Enne CSS3 tulekut pani sõna "animatsioon" küljendajad külma higi valama. Ja kõik sellepärast, et neil päevil oli võimatu kvaliteetset ja ilusat animatsiooni teha tühine ülesanne. CSS ei saanud seda teha, nii et kõik animatsioonid tehti JavaScriptis. Tuli läbi sõeluda hunnik foorumeid, leida ebaõnnest samad seltsimehed, kulutada palju aega arendusele ja lõpuks kuulda disainerilt: "Okei, see sobib." Ja kui CSS3 lõpuks välja tuli, ei lõppenud ilutulestik enne hommikut ja šampanja voolas nagu jõgi. See oli suurepärane päev kõikidele veebiarendajatele (järgmine selline päev oli siis, kui Microsoft teatas toe lõppemisest Internet Explorer). CSS3 tulekuga on paljud varem keerulised ülesanded muutunud lihtsaks ja nendega töötamiseks meeldivaks. Sama kehtib ka CSS-i animatsioonide kohta, millest ma selles artiklis räägin.

CSS-i üleminekud

CSS-i üleminekud võimaldavad teil CSS-i atribuute sujuvalt ja aja jooksul muuta. Nii saate võimaluse juhtida elemendi üleminekut ühest olekust teise. Alustame lihtsa näitega ja liigume edasi.

Kui hõljutate kursorit ruudu kohal, muutub taustavärv sujuvalt.

Nüüd vaatame lähemalt, kuidas CSS-is üleminekuid hallata. Meil on ainult 5 atribuuti, mis võimaldavad meil juhtida üleminekuanimatsiooni:

• üleminek-kinnisvara;
• üleminek-kestus;
• ülemineku-ajastamise-funktsioon;
• üleminek-viivitus;
• üleminek;

üleminekukinnisvara- määrab animeeritavate omaduste loendi; atribuute, mida siin pole täpsustatud, muudetakse nagu tavaliselt. Saate animeerida kõiki atribuute konkreetne element, määrates väärtuse kõik. Kui te ei määra ühtegi atribuuti, on vaikeväärtus kõik.

Üleminekuomadus: laius;

üleminek-kestus- määrab animatsiooni kestuse; aega saab määrata sekundites või millisekundites.

Ülemineku kestus: 1 s;

ülemineku-ajastamise-funktsioon- ajafunktsioon, näitab kiirendus- ja aeglustuspunkte teatud periood aega animatsiooni kiiruse muutuste kontrollimiseks. Lihtsamalt öeldes saate seda atribuuti kasutada animatsiooni käitumise määramiseks. Näiteks saame animatsiooni alguses kiirendada ja lõpus aeglustada või vastupidi. Animatsiooniprotsessi määratlemiseks kasutatakse Bezier' kõveraid. Üldiselt võimaldab ülemineku-ajastamise funktsioon luua animatsioonide jaoks palju erinevaid käitumisviise, see on terve artikli teema, nii et me ei lähe siin sügavamale.

Transition-timing-function: cubic-bezier(0, 0, 1, 1);

üleminek-viivitus- määrab viivituse enne animatsiooni algust, saab määrata sekundites või millisekundites.

Ülemineku viivitus: 500 ms;

üleminek- See üldine vara, mis võimaldab järjestada neli esimest atribuuti: omadus, kestus, ajastusfunktsioon, viivitus.

Üleminek: taustavärv 1 s cubic-bezier(0, 0, 1, 1) 500 ms;

See on see, mida me saime lihtne animatsioon: kui liigutate kursorit ruudu kohal, muutub laius; animatsiooni kestus on üks sekund; animatsioon mängib edasi lineaarne funktsioon; viivitus enne animatsiooni algust 500 millisekundit.

KOOS kasutades CSS-iüleminekud võivad animeerida peaaegu kõiki omadusi ja luua palju huvitavaid, ilusaid, funktsionaalseid ja isegi keerukaid animatsioone, mis täiendavad ja täiustavad teie projekti. Näiteks tegin selle materjali-FAB-i puhas CSS kasutades üleminekuid:

CSS-animatsioonid

CSS-animatsioonid võimaldavad luua keerukamaid animatsioone kui CSS-i üleminekud. Kogu saladus on @keyframesis. @keyframes reegel võimaldab teil luua animatsiooni võtmekaadrite komplekti kasutades, see tähendab, et see kirjeldab objekti olekut teatud hetk aega. Vaatame lihtsat näidet.

Meie ring on elavnenud ja tundub, et pulseerib.

Seal on 9 atribuuti, mis võimaldavad teil juhtida CSS-animatsioone:

• animatsiooni nimi;
• animatsioon-kestvus;
• animatsiooni-ajastamise-funktsioon;
• animatsioon-viivitus;
• animatsiooni-iteratsiooni-loendus;
• animatsioon-režii;
• animatsioon-mängi olek;
• animatsioon-täitmisrežiim;
• animatsioon;

animatsiooni nimi- siin on selle animatsiooni nimi, mis seob valijaga reegli @keyframes.

Animatsiooni nimi: minu animatsioon;

animatsioon-iteratsiooni-loendus@keyframes minu animatsioon ( 0% ( läbipaistmatus: 0; ) 100% ( läbipaistmatus: 1; ) )

- määrab animatsiooni korduste arvu, vaikeväärtus on 1. Väärtus infinite tähendab, et animatsiooni esitatakse lõputult.

Animatsiooni iteratsioonide arv: 2; animatsioon-režii

- määrab animatsiooni suuna.

Animatsiooni suund: tagurpidi; - animatsioon-mängi olek see vara

juhib animatsiooni peatamist ja esitamist. Väärtusi on kaks: jooksev (vaikimisi animatsioon esitatakse) ja peatatud (peatab animatsiooni).

animatsiooni-täitmise režiim Animatsiooni esitusolek: peatatud;

• - määrab, millised CSS-i omadused rakendatakse objektile enne või pärast animatsiooni. Võib võtta järgmisi väärtusi:
• puudub - animeeritud CSS-i atribuute rakendatakse objektile ainult animatsiooni esitamise ajal ja pärast lõpetamist naaseb objekt algsesse olekusse;
• edasi - animeeritud CSS-i atribuudid rakendatakse objektile pärast animatsiooni esitamise lõpetamist;
• tagurpidi – animeeritud CSS-i atribuudid rakendatakse objektile enne, kui animatsioon hakkab mängima;

mõlemad - animeeritud CSS-i atribuudid rakendatakse objektile nii enne kui ka pärast animatsiooni lõppu;

Animatsiooni täitmise režiim: tagurpidi; animatsioon-kestvus, animatsiooni-ajastamise-funktsioon, animatsioon-viivitus Omadused

Need töötavad samamoodi nagu sarnased omadused CSS-i üleminekutes, millest ma varem kirjutasin, nii et ma ei korda neid. Animatsioonide CSS-iga saate luua üsna keerulisi animatsioone ilma. JavaScripti kasutades Ilmekas näide

- need on laadijad, st elemendid, mis näitavad, et teie lehel midagi laaditakse. Siin on mõned näited.

Liikumistee moodul Motion Path Module CSS võimaldab teil luua objektide liikumist mööda rada läbi spetsiaalse liikumistee omaduse. Varem sai sellist animatsiooni teha ainult koos kasutades SVG-d

või keerulised skriptid.

• Sellel spetsifikatsioonil on 3 omadust:
• liikumistee;
• liikumine-nihe;

liikumine-rotatsioon; liikumistee

- see omadus võimaldab määrata punktid (koordinaadid), mida mööda objekt liigub. Süntaks on sama, mis SVG tee atribuudil.

Liikumistee: tee("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");- see omadus paneb objekti liikuma alguspunktist lõpp-punkti. See aktsepteerib kas kahekordset pikkust või protsenti. Selleks, et objekt hakkaks liikuma, peate määrama animatsiooni, mis on vahemikus 0 kuni 100%.

@keyframes airplane-fly ( 0% ( liikumise nihe: 0; ) 100% ( liikumise nihe: 100%; ) )

liikumine-pöörlemine- see omadus võimaldab määrata, kumma poole ettepoole objekt liigub. Saate määrata automaatse, tagurpidi või oma väärtuse kraadides ("-45deg", "30deg" jne).

Liikumine-pööramine: auto;

Kahjuks on motion-path hetkel toetatud vaid Chrome'is ja Operas, kuid loodame, et peagi võtavad nende eeskuju ka teised brauserid, sest asjast on tõesti kasu.

Neile, kes pole veel aru saanud, kuidas see toimib, või soovivad sellest paremini aru saada, tegin näite (link codeopenile).

Keeruliste animatsioonide loomine võib mõnikord muutuda aeganõudvaks protsessiks ning siin on abiks animatsiooniteegid ja -generaatorid. See artikkel pakub nimekirja parimad tööriistad CSS3 animatsioonide loomiseks.

1. Magic CS33 animatsioonid

Magic CSS3 Animations on eriefektidega CSS3 animatsioonide pakett, mida saate vabalt kasutada mis tahes veebiprojektide jaoks. Lülitage see lihtsalt sisse CSS-stiil magic.css või faili magic.min.css minimeeritud versioon.

2. CSS3 animatsiooni petuleht

CSS3 Animation Cheat Sheet on veebiprojektide jaoks eelinstallitud plug-and-play animatsioonide komplekt. Selle kasutamiseks peate saidile lisama stiilid ja rakendama ettevalmistatud CSS-i klassid elementidele, mida soovite animeerida. CSS3 animatsiooni petuleht kasutab @keyframes reeglit ja töötab kõigis uusimad versioonid brauserid (sh IE 10).

3. CSS3 võtmekaadrid

CSS3 võtmekaadrite animatsioonigeneraator on võrgutööriist, mis võimaldab luua animatsioone @keyframes reegli abil.

4. Maagia

Sisaldab palju CSS-i efekte. Efektid on sorteeritud mitmesse kategooriasse ( maagia, perspektiiv, pööramine, värelemine, staatiline, slaidid, CSS3 hõljumise animatsioon) ja nad on kõik üsna ilusad. Igal neist on oma klassid. Lihtsaim viis nende rakendamiseks on lisada need klassid sihtelementidele JavaScripti kaudu.

5. Animate.css

Animate.css pakub brauseriüleste CSS3 animatsiooniefektide komplekti. Tähelepanu tõmbamiseks saab kasutada efekte, luues animatsioone elementide ilmumise ja kadumise põhjal.

6. Põrgatama. Js

See JavaScripti teek dünaamilise animatsiooni loomiseks. Lihtsalt lisage komponent ja valige eelseadistus. Seejärel saate hankida lühikese URL-i või eksportida näidetest CSS3 animatsioonid.

7. Hover.CSS

Hover.CSS on kasulik CSS3 efektide kogu, mida saab kasutada kutsete, nuppude, logode, erilised pildid ja nii edasi. Kollektsiooni kasutamiseks kopeerige ja kleepige efektikood CSS-i või asetage link selle stiilifailile.

8. Ani.js

AniJS on deklaratiivne CSS-i animatsiooniteek, mis muudab teie arenduse kiiremaks ja rikkalikumaks. See on täielikult dokumenteeritud ja hõlpsasti kasutatav.

9. Progress.js

ProgressJs on JavaScripti ja CSS3 teek, mis aitab arendajatel luua ja hallata edenemisribasid. Saate luua oma mall edenemisriba jaoks või kohandage lihtsalt valmis.

10. Võtmekaader

Keyframer on käepärane tööriist mis aitab teil luua CSS3 animatsioone. Keyframerit on üsna lihtne kasutada. Võtmekaadri lisamiseks peate klõpsama ainult ajaskaalal ja seejärel klõpsama ümaral nupul, et rakendada animatsioonile CSS-i stiile. Või ristnupp praeguse kaadri kustutamiseks.

11. Stiil

Tööriist jaoks lihtne looming CSS3 animatsioonid. Peate graafiku abil animatsiooni seadistama, seda muutma, genereeritud CSS-koodi hankima ja ongi valmis!

12.CSSketš

CSSketch on Sketch 3 pistikprogramm, mis võimaldab teil stiilitabeleid sisestades kiiresti oma kujundust muuta. See toetab stiilikeelt ( vähem). See võimaldab teil stiililehel kasutada funktsioone ja muutujaid. CSSketch on tarkvara täielikult avatud lähtekoodi, et saaksite selle arengusse kaasa aidata.

13. Alighter

JQuery pistikprogramm animeeritud valgustuse ja CSS3 taustaanimatsiooni loomiseks. Saate animatsiooni kohandada ( kiirus ja suurus), mõju ( värv, läbipaistvus ja hägusus) ja määrake konkreetne kestus või keelake taimer täielikult.

14. deCSS3

See on tööriist veataluvuse testimiseks ( järkjärguline lagunemine ) CSS3 kood. Selle abil näete, kuidas veebilehte IE 6-8 versioonides kuvatakse.

15.GFX

GFX on 3D CSS3 animatsiooniteek, mis laiendab JQueryt mitmega kasulikud funktsioonid Sest tarkvara loomine CSS3 üleminekud, mida juhitakse setTimeout meetodiga.

Artikli tõlge " 15 parimat CSS3 animatsiooni Tööriistad jaoks Arendajad» koostas sõbralik projektimeeskond