Today’s goal:

1. Learn about basic CSS animations, beginning with the @keyframes rule  and the animate property 

 Today’s featured site:

• https://www.calorieking.com/us/en/ – Find out the nutritional value of your favorite fast foods

 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. Download Practice Code
   Click here to download the code , open it, and copy/paste into a new Notepad++ file. Save as animation1.html
2. 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.
3. 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 will create a new class with the animation properties we want to use and apply it to the box.
   • 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 (the finally step in animating the box).
4. Infinite animation
   Let’s make the box constantly change color by giving animation-iteration-count the value of infinite.
5. @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.
6. 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)
7. 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?)
8. Multiple animations
   • Let’s add different width values to each of our @keyframes stages (400px, 350px, 300px, 250px).
   • Let’s also add margin-top: 150px; margin-top: 200px; margin-top: 250px; and margin-top: 300px;

 Create your Own Animations

1. Animated shadow
   • CSS to add to your head section
     .circle {
background-color: red;
width: 200px;
height: 200px;
border-radius: 50%;
}

   • HTML to add to your body section (add pointy brackets around code and closing div tag)
     div class="circle"

   • Create a new @keyframes rule
     @keyframes shadow {
from {
box-shadow: 1px 1px 1px black;
}
to {
box-shadow: ? ? ? ?;
}
}
     Make the box shadow 20px and black (fill in the ? )
   • Create a new animation class in your CSS and apply the class (.animation3) to your circle
     .animation3 {
animation-name: ?; /* name of animation from above */
animation-duration: 10s; /* length of animation in seconds */
animation-delay: 1s; /* length of time before animation happens */
animation-iteration-count: 1; /* how many times the animation happens; can also be infinite */
animation-timing-function: ease; /* animation speed */
animation-fill-mode: forwards; /* what animation looks like when complete */
}
2. Animated Circle
   • Create a class in your CSS called .oval with width: 200px; height: 200px; border-radius: 5px; and background-color: green;
   • Add the class to your HTML by adding div tags with a class of oval
   • Following the model from the previous animations you’ve done, create a new @keyframes rule called oval and give it four stages 0%, 25%, 50%, and 100%. Change the border-radius at each stage so that it increases until the last value for 100% is border-radius: 50%. For example, start with border-radius: 20px; at stage 0% and keep increasing it for the stages of 50% and 100%.
   • Following the model from your previous animations, create a new animation class with all of the same properties as your last animation. Make this animation infinite and have its fill mode be backwards.
   • Animating the Filter Property
     Add this image to your HTML (or another one from your computer). To use this one, right click on it, choose copy image address, and use that image address as the source in an image tag
     
     Create a new @keyframes rule called visual where it will begin with filter: none; and end with filter: grayscale(100%);
     @keyframes visual {
from {
filter: none;
}
to {
filter: grayscale(100%);
}
}
     Create a new animation class with the same properties from your previous animation and apply it to your image
   • Any Animation
     Create any kind of animation you would like.
   • Trouble-shooting code here