[Applied Visual Design - FCC(Beta)]: Common Mistake

Challenge create-movement-using-css-animation has an issue. User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 OPR/43.0.2442.1144. Please describe how to reproduce this issue, and include links to screenshots if possible.

<style>
  div{
    height:40px;
    width: 70%;
    background:black;
    margin: 50 auto;
    border-radius: 5px;
    position: relative;
  }

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

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

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

console result:

• The @keyframes rule for 0% should use the left offset of 0px.
• The @keyframes rule for 50% should use the left offset of 25px.
• The @keyframes rule for 100% should use the left offset of -25px.

Sure enough, the left properties are all there. He/she is missing the top property as shown in the css code. These errors do not reflect on what the user has done wrong.

suggestion result:

• The @keyframes rule for 0% should use the top offset of 0px.
• The @keyframes rule for 50% should use the top offset of 50px.
• The @keyframes rule for 100% should use the top offset of 0px.

^^^ This will get these people thinking ^^^

or

warn the user that the challenge asks that the user should add the left offset to the @keyframes rule, not replace the top offset with the left offset

[cdrani]

@Brekmister: The challenge code actually includes the top property at all 3 keyframe stages, therefore the tests are right in checking only for the inclusion of the left property at the keyframe stages. Even with the suggestive empty space below the top property to place the left property, and the instruction text:

Add a horizontal motion to the div animation. Using the left offset property, add to the @keyframes rule so rainbow starts at 0 pixels at 0%, moves to 25 pixels at 50%, and ends at -25 pixels at 100%.

maybe it would be wise to place a note/comment to strictly add a left property and not replace the top property, or any other code for that matter, as a reminder. A simple comment in the challenge code would suffice. The tests should not have to be rewritten or modified for this challenge.

[DenizDI7]

How the fuck am i supposed to type it then. This is my code and ive done the right things im supposed to do, but it still says im wrong???

<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: -25px; left: -25px; } } </style> <div id="rect"></div>