WDD 330: Web Frontend Development II

CSS Animations - Transforms and Transitions

Overview

CSS is normally applied instantly when rendered. CSS animations using @keyframes, transitions, and the transform property are used to control state animation from one to another state of a selected element, including its pseudo-classes.

"The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions." - MDN

Prepare

Activity Instructions

  1. Create a valid HTML file that contains one <div> element with a class of "box".
  2. The content of the div with a class of box is "WDD 330".
  3. Create a supporting CSS file and link it to the HTML file.
  4. In the CSS file, create a rule for the <body> element that will center the <div> in the the <body> horizontally and vertically.
    Example 
    body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
  5. Style the box class to a shape of your own design with some basic background color and dimensions.
  6. Create a @keyframes rule named myanima with at least three animation points that transform and that changes one other property.
    Example 
    @keyframes myanima {
  0% {
    transform: translateY(0);
    background-color: #abe;
  }
  50% {
    transform: translateX(200px) translateY(-100px);
    background-color: #24A;
    color: #fff;
  }
  100% {
    transform: translateX(-100px) translateY(-100px);
    background-color: #57D;
  }
}
  7. In the .box CSS rule, apply an animation declaration that uses your myanima keyframe animation schema.
    Example 
    animation: myanima 3s infinite alternate;
  8. Be creative and make this your own.
  9. Share your animation with the class by posting a link to your public code (GitHub or CodePen) in the General forum.