CSS3 Demo: Transitions, Transforms and Animation

    Take the HTML5 template from the class website.
  1. remove the <nav> and <ul> so only the <header> and <h1> are left.
  2. Enter "CSS3 Exercise" in h1
  3. Remove the <p> and <figure> <img> and <figcaption> from the <article> tag.
  4. remove the <footer> tag.
  5. We will manipulate the HTML using only CSS styling. Remove the .example {} in the embedded style sheet.
  6. Give the section —the holding container — 100px margins on top and left to push the content away from the ends, and position it relative, in case you want to use absolute position at a later date.
  7. Give the header a 60 pixel margin at the bottom.
  8. The article will be given the style that will change as we move the window. The default style is a 200px square with a background color and a 1px border, positioned absolutely.
  9. Include a div element inside of the article element. Make sure you close the div. This div will be targeted by the transition from one picture to the other.
  10. We want to annotate what we are doing and will use the pseudo element header:after to tack on the word plain and set it below the header using relative positioning.
  11. header:after {content:"plain"; position: relative; top: 0px; color: hsla(0,100%,50%,.7); font-size: 1.2em;}
  12. Now comes the fun part. We are going to make this responsive, so that as we pull it past 400px, the style of the <article> element and the description in the title will change.
  13. First we make the @media block set to trigger at a window with greater than 400px: @media all and (min-width: 401px) {

    }
  14. Inside the @media block, we change the article using border radius to 50%. That turns a square into a circle.
  15. article {border: 20px solid #666; border-radius: 50%;}
  16. We want to change the description from plain to "border radius" header:after {content:"border radius";}
  17. Finally, place a number 1 in front of "CSS Exercise" header to keep track of the number that we complete.
  18. h1:before {content:"1. ";}
  19. Go back to your document and move the page width beyond the 400px threshold, and you should see the square change.
  20. You are now where you were in last week’s exercise, with an additional div element placed inside of the article element. This week, we experiment with transitions, transformations and animation.
  21. You can get the different properties for the demonstrations on the website.
  22. The procedure remains the same, with an incremental 100px jump with each new media query.
  23. Notice that there is no need to repeat properties if they are already defined. There is only a need to overwrite properties that will change.
  24. You can follow this step by step guide or experiment on your own
  25. @media (min-width: 500px) {

    }
  26. article {background: purple; -webkit-transition: all 2s ease-in-out;background-size: cover;}
  27. article:hover { background: blue;}
  28. header:after {content:"transition background color";}
  29. h1:before {content:"2. ";}
  30. @media all and (min-width: 600px) {

    }
  31. article {background: url(http://b.parsons.edu/~dejongo/12-fall/stuff/08_transition-2.jpg); opacity: 1;
    -webkit-transition: all 2s ease-in-out;background-size: cover; border: none; border-radius: 0;}
  32. article:hover {background: url(http://b.parsons.edu/~dejongo/12-fall/stuff/08_transition-2.jpg); opacity: 0; background-size: cover;}
  33. div {width: 400px; height: 400px; background: url(http://b.parsons.edu/~dejongo/12-fall/stuff/08_transition-1.jpg) center center; border: 1px solid silver; position: absolute; left; 0; opacity: 1.0; background-size: cover; }
  34. header:after {content:"transition between pictures";}
  35. h1:before {content:"3. ";}
  36. @media all and (min-width: 700px) {

    }
  37. article, div {-webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform: scale(1) rotate(45deg)
    translate(100px, 0px) skew(0deg, 0deg);
    -moz-transform: scale(1) rotate(45deg)
    translate(100px, 0px) skew(0deg, 0deg);}
  38. header:after {content:"2D (z-axis) rotate";}
  39. h1:before {content:"4. ";}
  40. @media all and (min-width: 800px) {

    }
  41. article, div {
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform: perspective(305)
    translate3d(100px, 0px, 30px)
    scale3d(.5, .5, .7)
    rotate3d(51, 49, 60, 49deg);
    -webkit-transform-origin: 9% 51% 50%;
    -webkit-transform-style: preserve-3d;
    -moz-transform: perspective(305)
    translate3d(100px, 0px, 30px)
    scale3d(.3, .3, .5)
    rotate3d(51, 49, 60, 49deg);
    -moz-transform-origin: 9% 51% 50%;
    -moz-transform-style: preserve-3d;}
  42. header:after {content:"3D Transform";}
  43. h1:before {content:"5. ";}

    @media all and (min-width: 900px) {

    }
  44. article, div {
    -webkit-transform: none;
    -moz-transform: none;}
  45. header:after {content:"back to normal coordinates";}
  46. h1:before {content:"6. ";}
  47. @media all and (min-width: 1000px) {

    }
  48. @-webkit-keyframes name-for-animation {
    0% { top: 30px; left: 100%; }
    10% { top: 100px; left: 90%; }
    20% { top: −200px; left: 80%; }
    30% { top: 100px; left: 70%;
    width: 200px; height: 200px;
    border-width: 100px;
    }
    40% { top: −200px; left: 60%;
    width: 200px; height: 200px;
    border-radius: 100%;
    border-width: 0px;
    }
    50% { top: 50px; left: 50%;
    width: 400px; height: 400px;
    border-radius: 0%;
    border-width: 100px;
    }
    60% { top: −200px; left: 40%; }
    70% { top: 200px; left: 30%; }
    80% { top: -200px; left: 20%; }
    90% { top: 500px; left: 10%; }
    100% { top: 30px; left: -10%; }
    }
    @-moz-keyframes name-for-animation {
    0% { top: 30px; left: 100%; }
    10% { top: 100px; left: 90%; }
    20% { top: −200px; left: 80%; }
    30% { top: 100px; left: 70%;
    width: 200px; height: 200px;
    border-width: 100px;
    }
    40% { top: −200px; left: 60%;
    width: 200px; height: 200px;
    border-radius: 100%;
    border-width: 0px;
    }
    50% { top: 50px; left: 50%;
    width: 400px; height: 400px;
    border-radius: 0%;
    border-width: 100px;
    }
    60% { top: −200px; left: 40%; }
    70% { top: 200px; left: 30%; }
    80% { top: -200px; left: 20%; }
    90% { top: 500px; left: 10%; }
    100% { top: 30px; left: -10%; }
    }
  49. article, div {
    -webkit-animation: name-for-animation 10s linear infinite;
    -moz-animation: name-for-animation 10s linear infinite;
    position: absolute;
    top: 30px;
    left: 100%;
    z-index: 50;
    width: 400px;
    height: 20px;
    border: 4px solid yellow;
    text-overflow: hidden;
    text-align: center;}
  50. header:after {content:"animation (hover over picture to transition to other picture)";}
  51. h1:before {content:"6. ";}
  52. You can explore this further in class or at home.