CSS animaatiot

Aloitus

• Lataa tämä repo kuten aiemmissa tehtävissä

Tehtävä A

• Avaa teht-a.html sekä css/main-a.css
• Lisää html sivulle kaksi
  elementtiä ja tee kaksi vapaavalintaista CSS animaatiota
• Lisää html sivulle kaksi
  elementtiä lisää ja tee kaksi vapaavalintaista CSS 2d transformia
• Lisää html sivulle kaksi
  elementtiä lisää ja tee kaksi vapaavalintaista CSS 3d transformia
• Apuja:
  • http://www.w3schools.com/css/css3_animations.asp
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
  • http://www.w3schools.com/css/css3_2dtransforms.asp
  • http://www.w3schools.com/css/css3_3dtransforms.asp

Tehtävä B

• Avaa teht-b.html, css/main-b.css sekä js/main.js
• Sivulla on kolme elementtiä: nav, main ja aside. Jokainen näistä vastaa tavallaan yhtä sivua.
• Navigaation tulisi tapahtua animoimalla näkymää sivusuunnassa:
  • Ensimmäinen näkymä on main-elementin sisältö
  • Menu-napista painamalla esiin liukuu nav-elementin sisältö
  • Settings-napista esiin liukuu aside-elementin sisältö
  • Close-napeista main-elementin sisältö liukuu takaisin näkyviin
• Käytä animoimiseen CSS-transitioita
  • liukuanimaatio tehdään liikuttamalla body-elementtiä css:n left-ominaisuudella
  • käytä JavaScriptiä vaihtamaan body-elementin left-ominaisuutta, kun nappeja painetaan
• Apuja:
  • http://www.w3schools.com/css/css3_transitions.asp
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
  • https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm
  • http://xahlee.info/js/js_fadeout_css_transition.html

Palautus

• Tallena tämä kansio kotihakemistoosi ja palauta Tuubiin linkki