How to Create Movement Using CSS Animation

What is your hint or solution suggestion?

@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;
    }
  }

Challenge: Create Movement Using CSS Animation

Link to the challenge:

Hi @officialtaiwoatteh,
welcome to the FCC forum.

Thanks for your suggestion!

PS: I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Also, for posts with solutions, please hide their contents by enclosing the code within [details] code goes here... [/details]. This just prevents spoiling the solution for other forum users who do not want to see the solution.

Hi @officialtaiwoatteh,

Is your test not passing?

I copied and pasted your code into the test, and it was passing on my browser.

Here is a draft for review:


Applied Visual Design: Create Movement Using CSS Animation


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


Hint

@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
   */
}

Solution

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

This was a suggestion for a challenge hint/solution - the ones you can find in the learning section under ‘Get help’ > ‘Get a hint’. These are special posts on the forum and for some challenges they weren’t written yet.

Oh! Got it! Sorry. Thank you for clarifying.