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.
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;
@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
*/
}
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.
Thank you @officialtaiwoatteh and @michaelsndr , for your guide post contribution. I have taken your suggestions and included them in the following guide post: