Today’s goals:

• Continue practicing basic CSS animations with the @keyframes rule and the animation property
• Learn how to change more than one CSS style in a single animation
• Learn about 2D transforms and the transform property

 Today’s featured website:

• http://onlineclock.net/bg/fireplace/– This is a great site for checking the time, setting an alarm, or simply chilling out with a relaxing background.

 CSS Animations

• A CSS animation is basically when an element changes styles over a set period of time.
• We learned yesterday that the @keyframes rule and the animation property are used together to create animations with CSS.
• To practice, we are going to continue with the page we created yesterday, so please open Notepad++ and go to that page.
  1. Adding more styles to an animation:
     • Let’s also change the font-size in our colorchange animation by adding the font-size property inside from and to in the @keyframes rule.
     • Let’s also add a border to our colorchange animation.
  2. Choosing style of element when animation finishes:
     • Let’s look at the animation-fill-mode property to control what our animation looks like when it ends. Let’s add that property to our colorchange animation and choose the forwards value.
  3. 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
     • Let’s add some rotations to our moving image. We’ll start with one and then add a different rotation for each stage. Transform is the property and the value is rotate(#deg). Example: transform: rotate(10deg);. What happens when you use a negative value?
     • Let’s add another image to our page to animate. Use this image or another one on your computer.
     • Let’s do a new animation by copying and pasting the @keyframes move code and changing the name to move. Also copy and paste the .animation3 class, change the name to .animation4, delete the position property, and change the animation-name to move2.
     • We can move an element by using transform: translate(x,y) or transform: translateX(#) or transform: translateY(#). X is the x-axis (horizontal movement) and Y is the y-axis (vertical movement).
     • Delete the top: 0px; etc. values from the @keyframe code you copied and pasted. Let’s change rotate to translateX(100px), translateX(200px) and so on to make the image move horizontally. Let’s make the animation-iteration-count: 1; and add animation-fill-mode: forwards;
     • Now let’s make the image move vertically by using translateY and make the pixel values in increments of 50, starting with 50.
     • Finally, let’s make the image move vertically and horizontally by using transform: translate(x,y)
     • 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.