CSS3 animatsioonid – Animatsiooni loomine (Harjutus 3)

Katkematu animatsiooni loomine

Klassikalise animatsiooni loomine toimub CSS3’s ka võtmekaadrite alusel. Kasutan järgmises näites hammasratta pilti, mille paneme lõpmatult liikuma.

Lisame sama hammasratta html dokumenti.

Paneme selle hammasratta CSS’is kohe liikuma ja vaatame mida me kirjutasime.

Esimese asjana lisasin kohe veebilehitseja eesliite (pärast ka teise veebilehitsejate omad). Seejärel andsin animatsioonile nime (name), animatsiooni kestvuse (duration), ajastuse (timing) ja märkisin, et see töötaks lõpmatult (iteration-count). Edasi saan nime järgi pöörduda selle animatsiooni poole ja “öelda” milliseid parameetreid soovin muuta. Hetkel alustab 0-kraadiga ja nelja sekundi jooksul tehakse täisring.

Kasutame sama tehnikat ja teeme ühe animeeritud bänneri. Tekitame selleks html koodi:

CSS’is anname üldise suuruse ja lükkame tekstid põhikastist näiteks allapoole. Kindlasti kasutame overflow:hidden, et väljapoole olevad tekstid jääks peitu.

Edasi anname tekstidele animatsiooni parameetrid ja määrame alguse ning lõpu võtmekaadrid.

Ja tulemuseks lõputult liikuvad tekstid.

Animatsiooni võtmekaadrite lisamine

Eelmised animatsioonid toimusid kahe võtmekaadri vahel. Parameeter alguses ja parameeter lõpus. Nüüd kui soovid animatsiooni täiendada, siis saab teha seda protsentidega. Võtame näiteks sama bänneri animatsiooni ning järame tekstid korraks keskele seisma.

Harjutus 3

Loo animeeritud stseen, kus UFO liigub üle lehe:

  • kasuta seda ufot
  • kasuta tausta siit http://bit.ly/2CCOdBO
  • leia taustamuusika, näiteks siit http://freemusicarchive.org/
  • taust katab kogu veebilehe
  • ufo liigub näiteks vasakult paremale, aga ei liigu sirgjooneliselt. Kasuta kokku vähemalt 6 võtmekaadrit

Viimased postitused

Meist

metshein.com on pakkunud juba üle kümne aasta tasuta eestikeelseid infotehnoloogiaga seotud kursusi. Sama kurssi püütakse järgida ka edaspidi. Eesmärk muuta arvutiõpe võimalikult lihtsaks!

metshein.com: parim eestikeelne koolitusportaal

Autorist ja kontakt: kliki siia

Kontrolli tunnistust

Tööribale