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.

.animated_box {
    background: black;
    border: 1px solid #000;
    -webkit-animation: rotRect 3s ease-in-out 3s infinite alternate;
    animation: rotRect 3s ease-in-out 3s infinite alternate;
}
@-webkit-keyframes rotRect {
    0%   {background: rgba(0,0,0,128); -webkit-transform: rotate(0deg); width: 10%;}
    25%  {background: rgba(64,64,64,100); -webkit-transform: rotate(45deg); width: 20%;}
    50%  {background: rgba(128,128,128,75); -webkit-transform: rotate(90deg); width: 10%;}
    75%  {background: rgba(192,192,192,25); -webkit-transform: rotate(135deg); width: 5%;}
    100% {background: rgba(255,255,255,0); -webkit-transform: rotate(180deg); width: 20%;}
}
@keyframes rotRect {
    0%   {background: rgba(0,0,0,128); transform: rotate(0deg); width: 10%;}
    25%  {background: rgba(64,64,64,100); transform: rotate(45deg); width: 20%;}
    50%  {background: rgba(128,128,128,75); transform: rotate(90deg); width: 10%;}
    75%  {background: rgba(192,192,192,25); transform: rotate(135deg); width: 5%;}
    100% {background: rgba(255,255,255,0); transform: rotate(180deg); width: 20%;}
}

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