Today’s goals:

• Review 2nd quarter grades and distracted student policy (link )
• Finish animation property and @keyframes practice on W3Schools (from Thursday)
• Animation show case– check out sites effectively using animation and review a web-based tool to create animations
• Learn about 2D transforms and the transform property

 Today’s featured website:

• https://happy2019.sretks.com/ – This site creatively uses animations to help you set goals for 2019

 CSS Animations Practice

• Animation exerxcises: do 1-6
  Start here: https://www.w3schools.com/css/exercise.asp?filename=exercise_css3_animations1 
  Code help: https://www.w3schools.com/css/css3_animations.asp 
• If you finished last week: Please find at least two examples of animations on two different websites. Save the links so you can share with the class for our Animation Showcase.
• Animation short-hand property
  You will often see the animation properties collapsed into a single line of code. For example:
  animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
/* could also be written as follows: */
animation: example 5s linear 2s infinite alternate;


  Animation Showcase

• Web-based animation tool
  • Animista  is a web-based tool that generates the CSS you need to create fun animations! Let’s try some and look at the @keyframes and animation property code that’s generated.
• Subtle animation
  • https://www.smashingmagazine.com/– changes on hover
  • https://www.7up.nl/7up– bubbles
  • https://fournier-pere-fils.com/home– birds and moving light
• Not-so-subtle animation
  • https://yourplanyourplanet.sustainability.google/
  • http://www.mikimottes.com/
  • https://eatgenesis.com/
  • https://codepen.io/brettmitchell/pen/KWwgQo
  • http://www.species-in-pieces.com/– These animations are made with CSS polygons and the transition property , which creates an animation from changing values for the same property over a set period of time (vs using different properties with @keyframes and the animation property)

 2D transforms & the transform property

• From W3Schools.com: CSS transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size and position. CSS supports 2D and 3D transformations. We’re doing 2D today. The transform property is a great one to use to create animations with CSS.
• Let’s look at the transform property  and its numerous (fun) values
• Download this code  and let’s review it together. This webpage shows two different animations applied to two images using the transform property and its rotate and translate values.
• Note: The transform property  and its different values for translating, rotating, scaling, and skewing is useful on its own without animation. For example, it can be used to to rotate images like you see here. 
• Do now: Try these 4 exercises  for the transform property to practice translate, rotate, scale, and skew. These aren’t animations- you’re practicing using the transform property and its values (see here for code help )