freeCodeCamp Challenge Guide: Create Movement Using CSS Animation

Guide
1

Create Movement Using CSS Animation

This is a stub. Help the community by making a suggestion of a hint and/or solution. We may use your suggestions to update the missing sections

Problem Explanation

The given animation (called rainbow ) moves down and up. It does so by setting the top: property to different values at the beginning, middle and end.

Enhance the animation, so that it also moves right and then left. You can achieve this by adding a left: property and setting it also to three different values. For this example we use: 0px, 25px, -25px;

Relevant Links

Hints

Hint 1

@keyframes rainbow {
   /*
   start of animation (0%)
       position the element on the left edge (0px)

   middle of animation (50%)
       position the element 25px off the left edge

   end of animation (100%)
       position the element -25px off the left edge
   */
}

Hint 2

Hint goes here

Solutions

Solution 1 (Click to Show/Hide) 
<style>
div {
  height: 40px;
  width: 70%;
  background: black;
  margin: 50px auto;
  border-radius: 5px;
  position: relative;
}

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}

@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px;
    left:0px;
  }
  50% {
    background-color: green;
    top: 25px;
    left: 25px;
  }
  100% {
    background-color: yellow;
    top: 50px;
    left:-25px;
  }
}
</style>

<div id="rect"></div>

Code Explanation

  • Code explanation goes here
  • Code explanation goes here

Relevant Links

10 Likes