Week 5

CSS3 Transitions Navigation

Session 1: Please be prepared to present the JS Calculator Web Application following studio time today. During studio time we will work on resolving any bugs present in your calculator code and validating user input.

Session 2: Today we will cover the first of our three exercises: CSS3 Transitions. CSS3 transitions are time-based effects and animations that have the advantage of being applied using the familiar technique of CSS rather than using complicated JavaScript behaviours. CSS3 transitions and animations are supported in most modern browsers including IE 10 (older versions of IE are not supported), Chrome, Safari, Firefox, and Opera.

Exercise 1: CSS3 Transitions
Due: Session 2, Week 6 (5 points)

Description:
Create single page with page-jump navigation to a minimum of five examples of CSS3 transitions and animations. Write a brief explanation of each effect below each example. A zip file of the environment and the examples must be uploaded by session 2 of week 6.

Requirements:
1. Build a single page with a minimum of five content areas.
2. Each content area must contain an example of a CSS transitions or animation.
3. Each example must be distinct (i.e. do not repeat a color transition).
4. Upload to your student webspace before class on session 2 of Week 5.

Points Breakdown:
1 point awarded per distinct and functional transition or animation

Relevant Resources:
W3Schools CSS3 Transitions
MDN: Using CSS3 Transitions
CSS: Animation Using CSS Transforms

2 thoughts on “Week 5”

  1. Here are my submissions for Googlefu:

    http://www.css3maker.com/css3-transition.html
    This site let’s you adjust the transition and all aspects of it. Let’s you see what each one does. This web app shows other CSS3 styles as well as transition.

    http://html5css3box.com/transitions/
    This site actually allows you to view the code necessary for the transitions.

    http://css3.bradshawenterprises.com/transitions/
    This site shows you 3 complex examples as well as a breakdown of animatable properties.

Comments are closed.