Anonim

Ang Animate.css ay nasa loob ng ilang taon ngayon at dapat kong aminin na medyo huli na sa party. Natagpuan ko lamang ito ng ilang buwan na ang nakakaraan habang naghahanap ng net para sa ilang mga tutorial sa animation ng CSS at natagpuan kung ano ang dapat maging pinakamabilis, pinakasimpleng paraan upang mag-animate sa paligid, Animate.css.

Nilikha ng isang tao na tinawag na Dan Eden, Animate.css ay isang mabilis na paraan upang makita kung paano gumagana ang CCS at makakuha ng ilang pagkilos ng animation sa iyong website.

Inilarawan bilang 'Magdagdag lamang ng tubig CSS animation' Animate.css ay medyo masaya sa isang malubhang panig. Pinapayagan nito kahit na ang mga web designer ng web tulad ng aking sarili na mabilis na makarating sa mga pangunahing kaalaman ng CSS animation at lumikha ng simple ngunit epektibong epekto para sa mga website. Mula sa isang animated na headline hanggang sa higit pang mga kasangkot na paggalaw, magagawa ito ng tool na ito.

Animate.css

Ang Animate.css ay magagamit upang i-download mula sa GitHub at mahalagang isang library ng mga simpleng CSS effects na nakolekta sa isang lugar. Ang bawat animation ay mahusay na nakabalot at handa nang gamitin. Ang kailangan mo lang gawin ay hanapin ang animation na gusto mo at ilapat ang klase. Iyon talaga ang naroroon.

Hindi mo na kailangang i-download ang buong library kung hindi mo nais na mayroong 2, 500 na linya ng code sa loob nito. Maaari mong bisitahin ang Animate.css site, makahanap ng isang animation at i-click ang link na Download Animate.css. Naglo-load ito sa klase papunta sa isang web page para makopya at magamit mo kung naaangkop mo.

Ito ay mas madaling gamitin GitHub bagaman at mag-drill down upang mahanap ang epekto na hinahanap mo.

  1. Mag-navigate sa pahina ng css GitHub.
  2. I-click ang link na Source upang ma-access ang listahan ng mga elemento.
  3. Piliin ang uri ng epekto na hinahanap mo mula sa listahan. Ang bounce ay isang naghahanap ng atensyon, kaya piliin ang link ng pansin_seekers.
  4. Piliin ang bounce.css.
  5. Kopyahin ang code at ilagay ito sa iyong pahina upang ilapat ang animation.

Ito ay talagang simple. Gusto mong malinaw na pumili ng iba't ibang mga pagpipilian para sa iba't ibang mga epekto ngunit ang resulta ay pareho. Pag-access sa code na kinakailangan upang gawin ang mabibigat na pag-aangat sa pahina.

Ang pagbuo ng isang animated na bagay na may Animate.css

Ang pagbuo ng isang bagay na cool na may Animate.css ay simple. Ito ay isang bagay lamang sa paghahanap ng CCS code at idagdag ito sa iyong sariling CSS. Kung magagawa ko ito, may makakaya!

Ang unang pagpipilian sa pahina ng Animate.css ay bounce, kaya gagamitin natin ito sa halimbawang ito.

  1. Idikit ' 'sa loob sa iyong styleheet.
  2. Hanapin ang CSS para sa animation na nais mo at idagdag ito sa elemento na nais mong buhayin. Halimbawa, idagdag '
    'upang idagdag ang bounce na epekto sa pagsubok, isang imahe o anupaman.
  3. Idagdag ang sumusunod na CSS code upang gawin itong gumana. Kinuha mula sa bounce.css sa itaas.

Bounce ang mga @keyframes {

mula, 20%, 53%, 80%, hanggang sa {

animation-timing-function: cubic-bezier (0.215, 0.610, 0.355, 1.000);

ibahin ang anyo: translate3d (0, 0, 0);

}

40%, 43% {

animation-timing-function: cubic-bezier (0.755, 0.050, 0.855, 0.060);

ibahin ang anyo: translate3d (0, -30px, 0);

}

70% {

animation-timing-function: cubic-bezier (0.755, 0.050, 0.855, 0.060);

ibahin ang anyo: translate3d (0, -15px, 0);

}

90% {

ibahin ang anyo: translate3d (0, -4px, 0);

}

}

.bounce {

pangalan ng animation: bounce;

pagbabago-pinagmulan: ilalim ng sentro;

}

Ang pagkuha ng animation nang higit pa sa Animate.css

Ang pagkakasunud-sunod sa itaas ay nagdaragdag ng isang bounce effect kapag ang unang pahina ay naglo-load, na kung saan ay cool ngunit isang beses na bagay. Paano ang tungkol sa idagdag namin ito upang mag-hover. Sa ganoong paraan, tuwing may tumatakbo sa pagsubok, humuhupa ito. Hindi ito isang bagay na gagawin ko sa isang website ng produksyon, ngunit ito ay isang mahusay na paraan upang maipakita kung paano gumagana ang lahat.

Idagdag ang sumusunod na code sa iyong CSS upang magdagdag ng bounce sa hover effect. Ang, sa tuwing ang mouse ay nag-iikot sa elemento, dapat itong mag-bounce.

.animated: hover {

-webkit-animation-tagal: 1s;

-moz-animation-tagal: 1s;

-ms-animation-tagal: 1s;

-o-animation-tagal: 1s;

tagal ng animation: 1s;

-webkit-animation-fill-mode: pareho;

-moz-animation-fill-mode: pareho;

-ms-animation-fill-mode: pareho;

-o-animation-fill-mode: pareho;

animation-fill-mode: pareho;

}

Kung alam mo ang CSS, malalaman mo ang mas mahusay kaysa sa tungkol sa kung paano ipatupad ang iba't ibang mga epekto sa iba't ibang mga pagkilos. Bilang isang nagsisimula, ito at ang mga aklatan na ibinigay sa Animate.css ay tumutulong sa akin na lumikha ng pangunahing, ngunit mabisang mga animation para sa aking mga web page.

Hindi ko alam kung ilan ang gagamitin ko sa isang live na website dahil hindi nila laging bumababa nang maayos at ang mga gumagamit ng mobile ay tila hindi nila gusto ang lahat. Gayunpaman, bilang isang aralin sa kung paano gumagana ang CSS at kung paano ito magagamit upang mapahusay ang web, ito ay isang mahusay na mapagkukunan. Baguhan lang ako ngunit gumugol kahit ilang oras kasama ang Animate.css para sa tutorial na ito ay nagturo sa akin ng maraming. Sa palagay ko ay lalaro pa ako nito bago ako magawa. Kumusta ka?

Pagsusuri sa Animate.css