Session 1: Today’s inclass demonstrations will involve typical uses for CSS3 transitions and animations. CSS3 transitions and animations are an easy and generally accessible way to integrate motion into your designs. Most transitions are initiated via the hover pseudo class. Animations begin when the page loads. Uses include: navigation, thumbnail fades, image captions, sliders, etc.
Relevant links:
CSS3 Transitions of W3Schools
CSS3 Transition Tutorial
Lea Verou’s Prefix Free Widget
Trigger CSS3 Transitions on Click
Session 2: Today we will be critiquing your design mockups. Please be prepared to show your mockups to your assigned group members. I will visit each group and provide additional feedback.
Final Web Application Milestone #1
Due: Week 11, Session 2 (before class starts)
1. Be prepared to show your template work-in-progress
2. Demonstrate navigation with both primary and secondary items
3. Illustrate your ability with fluid layout, floats, asides, and typesetting
1) http://css-tricks.com/almanac/properties/t/transition/
-This site shows how to use the transition property for boxes.
2) http://learn.shayhowe.com/advanced-html-css/transitions-animations/
-This site demonstrates how to use both transitions and animations for buttons. This site also demonstrates the different time delays you can add.
3) http://www.azarask.in/blog/post/animation-css-transitions-jquery-easy/
-This site explains animations with CSS3 transitions and their pros and cons. This is a little more complex, but very short.
1. http://www.kirupa.com/html5/all_about_css_transitions.htm
– All about CSS transitions, properties, and configuration. Detailed breakdown of properties.
2. http://www.the-art-of-web.com/css/css-animation/
– CSS animations explained, showing examples, and code.
3. http://www.creativebloq.com/css3/animation-with-css3-712437
– 22 examples of stunning CSS animations for brainstorming ideas.
This sight just goes over a bunch of different css transitions
1) http://blog.alexmaccaw.com/css-transitions
– This site goes over a bunch of different css transitions you can use.
2) http://www.the-art-of-web.com/css/timing-function/
– This site goes over the timing of css transitions
3) http://www.css3.info/preview/css3-transitions/
– Another basic overview/introduction to css transitions