css animations

Class Friday, January 18, 2019

 Today’s goals:

  • Finish animation challenge
  • Complete second quarter survey and self-paced second quarter review

 Today’s featured app:

 Animation Challenge

You are going to practice everything we’ve learned about animations over the past few classes. You will use Animate.css, @keyframes rule and the animation property, and Animista.net.

  1. Download this code and copy/paste into a new Notepad++ page. Save as animationchallenge.html.
  2. Animate.css
    • I’ve already added the Animate.css style sheet to the code I gave you (see line 8 in your code) so all you have to do is add classes to animate your elements
    • Choose any animated class you want to apply to your h1. Go here  for the list of choices. Each class begins with the word animated and ends with the class name. Example: p class=”animated bounce”
    • Your h1 will only be animated once when the page loads. Make your h2 have an infinite animation by choosing a new animation class in the same way as the previous step but add infinite in the middle. Example: p class=”animated infinite bounce”
  3. @keyframes rule and animation property
    • Make the square change background-color from pink to purple by adding the background-color property in the to keyframe
    • Make the square move horizontally 100px by using the transform property (see code example here ). Add the transform property in the to keyframe
    • Add the correct animation-name for the .box class and make the animation-duration 5 seconds.
    • Make the animation for the square (.box) happen two times
    • Make the animation for the square (.box) the same speed from beginning to end and find the right animation property to do that here /li>
    • Make the square end up purple and moved over 100px when the animation is over- find the right animation property to do that here 
    • Add the correct animation-name to the .circle class
    • Make the animation-duration for .circle 5 seconds, the animation-iteration-count infinite, and the animation-timing-function linear
    • Add the correct @keyframes stages for spin by filling in the ????
    • For the 25% @keyframes stage have the circle rotate 45 degrees by filling in the correct value for the transform property (see here  for example)
    • Make the 75% @keyframes stage the same as 25%
  4. Animista.net
    • You are going to use Animista.net  to animate your image
    • Go to Animista.net  and pick an animation you like
    • Modify the animation by using the left menu if you want to change things like animation duration, speed, etc.
    • When you have the animation the way you want, click on the curly brackets on the right just above the animation example to get the code. You will see animation property and @keyframes code. Click Autoprefixer to get rid of the unnecessary code.
    • Copy and paste the animation property and its values to the img selector in your CSS
    • Copy and paste the new @keyframes rule for the animation with the code below your image selector
  5. Your turn
    • Create a new animation any way you want by using either Animate.css, the @keyframes rule and the animation property, or Animista.net. Apply the animation to the content you already have or add new content to animate.

 Second Quarter Survey and Review

 What you learned second quarter

  1. CSS Box Model and box model properties (margins, borders, padding) and box-sizing (how browsers compute the width of content) (link)
  2. Opacity property (link)
  3. CSS selectors– type, .class, and #ID (link)
  4. Line-height property (link)
  5. Box-shadow property (link)
  6. Position property (link)
  7. Z-index property (link)
  8. CSS floats (link)
  9. Display property and values of block, inline, and inline-block (link)
  10. How to create horizontal and vertical website menus (link)
  11. Flexbox (or flexible box) layout (link)
  12. Border-radius property (link)
  13. Filter property (link)
  14. CSS animations: Animate.css (ready made animations to add to your site); @keyframes rule and animation property; Animista.net (web-based tool to create animations)
  15. Web typography (use of typography in web design) (link)
  16. How to create buttons with the button tag (link)

 Second quarter survey

 Self-guided reviews