Applied Visual Design: Change Animation Timing with Keywords

HTML-CSS
1

Hello! I can’t get out of this lesson. He says it is not complete, but it is.

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.

The code looks like this:
<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>
2

what’s the challenge link? that would be much helpful in helping you

3

Link

4

This lesson also appears to have some error:
Link

Says it is not to change id ball2, however, it is as it came in the lesson and has not changed.

The value of the `animation-timing-function` property for the element with the id `ball2` should not change.

code:

<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: cubic-bezier(0.25, 0.25, 0.75, 0.75);
  }
  #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>
5

Both of these submit fine for me, the code is good. I suspect it’s an issue with the browser you are using. Try using Firefox, or if you already are, try Google Chrome.

6

Yes, it was the browser. I used Google Chrome and it worked.

1 Like