Animate.css ir bijis jau dažus gadus, un man jāatzīst, ka esmu diezgan vēlu uz ballīti. Es to atklāju tikai pirms dažiem mēnešiem, meklējot tīklā dažas CSS animācijas apmācības, un atradu ātrāko un vienkāršāko veidu, kā animēt, Animate.css.
Animate.css, ko izveidojis puisis ar nosaukumu Dan Eden, ir ātrs veids, kā redzēt, kā darbojas CCS, un iegūt dažas animācijas darbības jūsu vietnē.
Aprakstīts kā “Tikai pievieno ūdeni CSS animācija” Animate.css ir nedaudz jautri ar nopietnu pusi. Tas ļauj pat amatieru web dizaineriem, piemēram, man, ātri ķerties pie CSS animācijas pamatiem un izveidot vienkāršus, bet efektīvus efektus vietnēm. Šis rīks to var veikt, sākot no viena animēta virsraksta un beidzot ar vairāk iesaistītām kustībām.
Animēt.css
Animate.css ir pieejams lejupielādei no GitHub, un tā būtībā ir vienkāršu CSS efektu bibliotēka, kas apkopota vienuviet. Katra animācija ir labi iesaiņota un gatava lietošanai. Viss, kas jums jādara, ir atrast sev tīkamo animāciju un pielietot nodarbību. Tas tiešām ir viss, kas tam ir.
Jums nav jāielādē visa bibliotēka, ja nevēlaties, jo tajā ir 2500 koda rindas. Jūs varat apmeklēt vietni Animate.css, atrast animāciju un noklikšķināt uz saites Lejupielādēt Animate.css. Tas ielādē klasi tīmekļa lapā, lai jūs varētu kopēt un izmantot pēc saviem ieskatiem.
GitHub tomēr ir vieglāk izmantot un padziļināt, lai atrastu meklēto efektu.
- Dodieties uz css GitHub lapu.
- Noklikšķiniet uz saites Avots, lai piekļūtu elementu sarakstam.
- Sarakstā atlasiet meklējamo efektu veidu. Atlēciens ir uzmanības meklētājs, tāpēc atlasiet saiti uzmanības meklētāji.
- Atlasiet bounce.css.
- Nokopējiet kodu un ievietojiet to savā lapā, lai lietotu animāciju.
Tas tiešām ir tik vienkārši. Jūs acīmredzot izvēlaties dažādas iespējas dažādiem efektiem, bet gala rezultāts ir vienāds. Piekļuve kodam, kas nepieciešams, lai smagi paceltu lapu.
Animēta objekta izveidošana, izmantojot Animate.css
Ar Animate.css kaut ko foršu izveidot ir vienkārši. Atliek tikai atrast CCS kodu un pievienot to savai CSS. Ja es to varu, jebkurš var!
Pirmā Animate.css lapas opcija ir lielība, tāpēc šajā piemērā izmantosim to.
- Ielīmēt ' 'iekšā savā stila lapā.
- Atrodiet vēlamās animācijas CSS un pievienojiet to elementam, kuru vēlaties animēt. Piemēram, pievienojiet “ ', lai pievienotu šo atlēciena efektu testam, attēlam vai tamlīdzīgam.
- Pievienojiet šo CSS kodu, lai tas viss darbotos. Paņemts no iepriekš norādītā bounce.css.
@keyframes lielība {
no, 20%, 53%, 80%, līdz {
animācijas un laika funkcija: kubiskais bezjerss (0, 215, 0, 610, 0, 355, 1, 000);
pārveidot: translate3d (0, 0, 0);
}
40%, 43% {
animācijas-laika noteikšanas funkcija: kubiskais bezjerss (0.755, 0.050, 0.855, 0.060);
pārveidot: translate3d (0, -30 pikseļi, 0);
}
70% {
animācijas-laika noteikšanas funkcija: kubiskais bezjerss (0.755, 0.050, 0.855, 0.060);
pārveidot: translate3d (0, -15 pikseļi, 0);
}
90% {
pārveidot: translate3d (0, -4x, 0);
}
}
.bounce {
animācijas nosaukums: lielība;
pārveidot-izcelsme: centra dibens;
}
Animācijas turpināšana, izmantojot Animate.css
Iepriekšminētā secība pievieno atlēciena efektu, kad lapa tiek ielādēta pirmo reizi, kas ir forši, bet vienreizēji. Kā būtu, ja mēs to pievienotu lidinājumam. Tādā veidā ikreiz, kad kāds virzās virs testa, tas atlec. Tas nav kaut kas, ko es darītu producēšanas vietnē, bet tas ir lielisks veids, kā parādīt, kā viss darbojas.
Pievienojiet CSS šo kodu, lai pievienotu atlēciena efektu. Katru reizi, kad pele virzās virs elementa, tai vajadzētu atlēkt.
.animēts: virziet kursoru {
-webkit-animācijas ilgums: 1s;
-moz-animācijas ilgums: 1s;
-ms-animācijas ilgums: 1s;
-animācijas ilgums: 1s;
animācijas ilgums: 1 s;
-Webkit-animation-fill-mode: abi;
-moz-animation-fill-mode: abi;
-ms-animācijas aizpildīšanas režīms: abi;
-o-animācijas-aizpildīšanas režīms: abi;
animācijas aizpildīšanas režīms: abi;
}
Ja jūs zināt CSS, jūs daudz labāk nekā es zināsim par to, kā dažādām darbībām ieviest dažādus efektus. Kā iesācējs, tas un Animate.css piedāvātās bibliotēkas man palīdz izveidot pamata, bet efektīvas animācijas savām tīmekļa lapām.
Es nezinu, cik daudz es izmantotu tiešsaistes vietnē, jo tās ne vienmēr ir pārāk labas, un mobilo tālruņu lietotājiem, šķiet, tas viņiem nemaz nepatīk. Tomēr kā lielisks resurss ir mācība par to, kā darbojas CSS un kā to var izmantot tīmekļa uzlabošanai. Es esmu tikai iesācējs, bet pat pāris stundu pavadīšana ar Animate.css šai apmācībai ir daudz ko iemācījusi. Es domāju, ka pirms tā pabeigšanas spēlēšu ar to daudz vairāk. Kā ar tevi?
