Today’s goals:

• Make fun animations with CSS using Animate.CSS
• Learn about basic CSS animations, beginning with the @keyframes rule and the animate property

 Today’s featured website:

• https://codepen.io/jkantner/pen/ZaMeyW– Enjoy this digital version of a classic toy!

 Animate.css

• Simple to use ready-made animations you can add to your website (little coding required)
• Let’s look at what Animate.css does.
• Step 1: add link to external style sheet for Animate.css in your head section
• Step 2: add classes to the elements you want to animate. Each class begins with the word animated and ends with the class name. Example: p class=”animated bounce” or p class=”animated infinite bounce” if you want the animation to happen continuously.
• Open Notepad++ and start a new webpage with this code
• Change the animated classes (use the Animate.css site as guide) for the text and picture
• You don’t have to make everything infinite. See what happens when you remove infinite. How often and when does the animation happen? How can you get it to happen again?
• Let’s look at the code behind Animate.css. What new CSS properties do you see?

 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.)
  • Let’s look at the code behind Animate.css again and see how they used @keyframes and the animation property. What is the animation name? What is the selector it’s being used with? What CSS style changes are happening in this animation?
  • @keyframes controls the CSS style changes while the animation property controls how long the animation takes place, speed, etc.

 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
   • 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
   • 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;