Test not valid even with the right answer ? BUG or error?

1

Hi,

Maybe I missed something obvious but I can’t understand why my answer is not accepted…Maybe I should take a nap and come back, however I thing there might be a bug
For the elements with id of ball1 and ball2, add an animation-timing-function property to each, and set #ball1 to linear, and #ball2 to ease-out. Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration of 2 seconds.

<style>

  .balls {
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #ball1 {
    left:27%;
    animation-timing-function: linear;
  }
  #ball2 {
    left:56%;
    animation-timing-function: ease-out;
  }

  @keyframes bounce {
    0% {
      top: 0px;
    }
    100% {
      top: 249px;
    }
  }

</style>

<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

Thanks for your help

2

Hello Esther,

When I run your code in the lesson, the tests pass. So, some reasons it might not be accepted for you are:

  1. Your browser (I use the latest stable version of Chrome)
  2. Certain browser extensions (this is rare, but possible)

First, I would reset the code, and try again; turning off and on again sometimes works…
If you want to troubleshoot/debug, open up your browsers development tools (Ctrl+Shift+i for Chrome), and look for errors logged in the console.

Hope this helps.

3

Thank you, I am using Internet Explorer so first, I would install the latest version of Chrome and try again then go with the browser development tools.

4

Hi Sky020, it works fine now !

2 Likes