Today’s goals:

• Continue learning how to create basic CSS animations with the @keyframes rule and the animate property
• Learn about @keyframes stages, animation speed, setting the style for the end of the animation, and adding multiple animations
• Learn about 2D transforms and the transform property

 Today’s featured website:

• https://saijogeorge.com/css-puns/titanic/ – CSS puns!

 About CSS Animations

• A CSS animation is basically when an element changes styles over a set period of time.
• Animation basics: the @keyframes rule  and the animate property . These are used together to create animations with CSS.
  • @keyframes  is the CSS rule where animation is created. Think of @keyframes as being stages along a timeline. Inside @keyframes, you can define these stages, each having a different style declaration. @keyframes has to be linked to a CSS selector in order for the animation to work.
  • The animation property  is used to call @keyframes inside a CSS selector. Animation can have multiple properties (name, duration, iteration-count, etc.)
  • @keyframes controls the CSS style changes while the animation property controls how long the animation takes place, speed, etc.

 @keyframes and Animation Property Basic “Formula”

• Click to view 

 CSS Animations Practice

1. Change the color of the yellow box
   Let’s create a new animation that has our yellow box change color. First, we’ll add a new @keyframes rule and call it colorchange. Copy and paste your @keyframes code and then we’ll change opacity to background-color. Let’s change background-color from yellow to green.
2. There are two ways now to animate our yellow box. Remember, @keyframes has to be linked to a selector and the animation property will call the @keyframes inside the selector. So we can either create a new class with the animation properties we want to use and apply it to the box, or simply add the animation properties to our .box class. Let’s try it both ways.
   1. Create a second animation class by copying and pasting the first one. Call it .animation2. Change the animation name to colorchange, the duration to 5s, and the iteration count to 3. Let’s add the .animation2 class to our div tags in our body section.
   2. Copy/paste the animation properties we just added to our .animation2 class into our .box class and get rid of the .animation2 class that we applied to our div tags.
3. Infinite animation
   Let’s make the box constantly change color by giving animation-iteration-count the value of infinite.
4. @keyframes stages:
   0% is beginning of the animation (from) and 100% is the end (to). You can have other values in between, like 25%, 50%, and 75% for different stages of the animation.
   • Let’s make our yellow box change into more colors.
   • Let’s change our colorchange @keyframes so from is 0% and to is 100%. Then add 25% and 50% and we’ll change the background-colors to pink and orange.
5. Animation speed
   Let’s use the animation-timing-function property  to set the speed of the animation. We’ll use the value of linear (same speed from start to end). Other values are ease (default), ease-in, ease-out, ease-in-out, and cubic-bezier(n,n,n,n) (you define your own values)
6. Animation end (choosing style of element when animation finishes:)
   • The animation-fill-mode property specifies how the animation should look after the keyframes have finished- the default is for the element to return to what it looked like before the animation began. It can take the following values- forwards (element will retain style(s) of last keyframe), backwards (element will retain style(s) of first keyframe), or both.
   • It’s affected by animation-iteration-count. Let’s change our value to 1 so the animation only plays once and let’s add animation-fill-mode: forwards; (what color will the box be?)
7. Multiple animations (adding more styles to an animation:)
   • Let’s add different width values to each of our @keyframes stages (400px, 350px, 300px, 250px).
   • Let’s also add margin-left: 0px; margin-left: 50px; margin-left: 100px; and margin-left: 150px;
8. 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 

 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 )