Animate.css on ollut jo muutaman vuoden ajan ja minun on myönnettävä, että olen melko myöhässä juhliin. Löysin sen vasta pari kuukautta sitten etsiessään verkosta CSS-animaatio-opetusohjelmia ja löysin nopeimman ja yksinkertaimman tavan animoida ympäristön, Animate.css.
Dan Eden -nimisen kaverin luoma Animate.css on nopea tapa nähdä miten CCS toimii ja saada animaatioita verkkosivustollesi.
Kuvailtu nimellä "Lisää vain vettä CSS-animaatio" Animate.css on vähän hauskaa vakavan puolensa kanssa. Sen avulla jopa itseni kaltaiset amatööriverkkosuunnittelijat voivat nopeasti päästä käsiksi CSS-animaation perusteisiin ja luoda yksinkertaisia, mutta tehokkaita tehosteita verkkosivustoille. Tämä työkalu voi tehdä yhdestä animoidusta otsikosta enemmän mukana oleviin liikkeisiin.
Animate.css
Animate.css on ladattavissa GitHubista, ja se on pohjimmiltaan kirjasto yksinkertaisista CSS-tehosteista, jotka on kerätty yhteen paikkaan. Jokainen animaatio on hienosti pakattu ja käyttövalmis. Sinun tarvitsee vain löytää animaatio, josta pidät, ja soveltaa luokkaa. Siinä todella on kaikki mitä sillä on.
Sinun ei tarvitse ladata koko kirjastoa, jos et halua, koska siinä on 2500 koodiriviä. Voit käydä Animate.css-sivustossa, löytää animaation ja napsauttaa Lataa Animate.css -linkkiä. Se lataa luokan verkkosivulle, jota voit kopioida ja käyttää haluamallasi tavalla.
GitHubin käyttö on kuitenkin helpompaa ja poraamalla löydät etsimäsi efekti.
- Siirry css GitHub -sivulle.
- Napsauta Lähde-linkkiä päästäksesi elementtiluetteloon.
- Valitse luettelosta etsimäsi tehostetyyppi. Bounce on huomionhakija, joten valitse attention_seekers -linkki.
- Valitse bounce.css.
- Kopioi koodi ja aseta se sivullesi animaation käyttämistä varten.
Se on todella niin yksinkertaista. Valitsit tietysti erilaisia vaihtoehtoja eri tehosteille, mutta lopputulos on sama. Pääsy koodiin, joka tarvitaan sivun raskaan nostamisen suorittamiseen.
Animoidun objektin rakentaminen Animate.css -sovelluksella
Jotain hienoa rakentaa Animate.css -sovelluksella on helppoa. Kysymys on vain CCS-koodin löytämisestä ja lisäämisestä omaan CSS: ään. Jos voin tehdä sen, kuka tahansa voi!
Animate.css -sivun ensimmäinen vaihtoehto on pomppiminen, joten käytämme tätä tässä esimerkissä.
- Liitä ' ' sisällä tyylitaulukossasi.
- Etsi haluamasi animaation CSS ja lisää se animoitavaan elementtiin. Lisää esimerkiksi " 'lisätäksesi pomppiefektin testiin, kuvaan tai muuhun.
- Lisää seuraava CSS-koodi, jotta kaikki toimisi. Otettu yllä olevasta bounce.css-tiedostosta.
@keyframes pomppii {
alkaen, 20%, 53%, 80%, {
animaatio-ajoitus-toiminto: kuutiometri-bezier (0, 215, 0, 610, 0, 355, 1, 000);
muunnos: translate3d (0, 0, 0);
}
40%, 43% {
animaatio-ajoitus-toiminto: kuutiometri-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transformaatio: translate3d (0, -30 px, 0);
}
70% {
animaatio-ajoitus-toiminto: kuutiometri-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transformaatio: translate3d (0, -15 px, 0);
}
90% {
transformaatio: translate3d (0, -4x, 0);
}
}
.poista {
animaation nimi: pomppia;
muunnos-alkuperä: keskiosa;
}
Animaation jatkaminen Animate.css -sovelluksella
Yllä oleva sekvenssi lisää pomppiefektin, kun sivu ladataan ensimmäisen kerran, mikä on siistiä, mutta kertaluonteista. Entäpä lisäämme sen leijua. Tällä tavoin, kun joku leijuu testin päälle, se pomppii. Se ei ole jotain, mitä tekisin tuotantosivustolla, mutta se on hieno tapa osoittaa, kuinka kaikki toimii.
Lisää seuraava koodi CSS-tietokantaan lisätäksesi palautumisen hover-tehosteeseen. Aina hiiren liikkuessa elementin päälle, sen pitäisi pomppia.
.animoitu: leiju {
-webkit-animaation kesto: 1 s;
-moz-animaation kesto: 1 s;
-ms-animaation kesto: 1s;
-animaation kesto: 1 s;
animaation kesto: 1 s;
-Webkit-animaatio-täytä-tila: molemmat;
-moz-animaatio-täytä-tila: molemmat;
-ms-animaatio-täyttö-tila: molemmat;
-o-animaatio-täyttö-tila: molemmat;
animaatio-täyttö-tila: molemmat;
}
Jos tiedät CSS: n, tiedät paljon paremmin kuin minä siitä, kuinka toteuttaa erilaisia vaikutuksia eri toimintoihin. Aloittelijana tämä ja Animate.cssin tarjoamat kirjastot auttavat minua luomaan yksinkertaisia, mutta tehokkaita animaatioita verkkosivuilleni.
En tiedä kuinka monta käyttäisin live-verkkosivustolla, koska ne eivät aina mene liian hyvin ja mobiilikäyttäjät eivät näytä pitävän heistä ollenkaan. Oppitunnina siitä, kuinka CSS toimii ja miten sitä voidaan käyttää parantamaan verkkoa, se on kuitenkin hieno resurssi. Olen vasta aloittelija, mutta jopa muutaman tunnin viettäminen Animate.css: n kanssa tähän opetusohjelmaan on opettanut minulle paljon. Uskon, että pelaan sen kanssa paljon enemmän, ennen kuin olen valmis. Entä sinä?
