Today’s goals:

• Learn about the animations behind Animate.css
• Learn about basic CSS animations, beginning with the @keyframes rule and the animate property

 Today’s featured website:

• https://codepen.io/cgorton/pen/aEoOKa– Decorate a virtual cookie! See more holiday-related fun from this developer here: https://codepen.io/collection/XqRKza/.

 Animate.css

• Simple to use ready-made animations you can add to your website
• 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.

 CSS Animations

• A CSS animation is basically when an element changes styles over a set period of time. Let’s look again at some of the Animate.css animations. What style changes are happening?
• Let’s look at the code behind Animate.css. What new CSS properties do you see?
• Animation basics: the @keyframes rule and the animate property. These are used together to create animations with CSS.
1. Download this practice code and copy and paste it into a new Notepad++ file. Save it as animation.html.
2. Launch it and take a look- what is the animation? What CSS styles are changing?
3. Let’s review the code. We are using the @keyframes rule to control how the element looks during the animation and the animate property to specify the animation’s style, duration, iteration, and speed.
4. How can we add an animated headline that uses the same animation?
5. Let’s create a new animation that has an element 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 color. Let’s change color from red to blue. Now we’ll 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.
6. Create a new paragraph and apply the new animation class to it.
7. Let’s add an image and make it move. Grab this image or add your own. Let’s add an @keyframes rule by copying and pasting the Standard syntax code from here. Change the animation name to move.
8. Let’s make a third animation class, .animation3, by copying and pasting .animation2. The only thing we have to add is position: relative. Now add class=”animation3″ to your image tag.
9. Keyframes tip: 0% is beginning of the animation (from) and 100% is the end (to). You can have other values in between, like we had 25%, 50%, and 75% for different stages of the animation.
• Animation property practice: animation exercises 1, 3, 4, 5, 6 (use https://www.w3schools.com/css/css3_animations.asp for reference)
• @Keyframe examples: https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp