Today’s goal:

1. Continue creating CSS animations with the @keyframes rule  and the animate property 

 Today’s featured site:

• http://eeerik.com/ – You’ve never seen a portfolio site like this one

 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 

 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
   • When you finish:
     • 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.
     • Look at how all of the long animation properties we learned can be collapsed into one line: https://alligator.io/css/animation-shorthand/
     • Look at all of the different CSS properties that can be animated here: https://www.w3schools.com/cssref/css_animatable.asp. Could you add an animation to your webpage project?
     • Update your portfolio on the class website with screen shots of your webpage project (or a live link if your site is published). Directions are here.