Bug in Challenge : Change Animation Timing with Keywords

#1

Hi,

It’s one of the last challenges in Applied Visual Design. When I read what I should do, different ids are used than the ones in the code. In the explanation ball1, ball2 and ball3 is mentioned but in the code I see star1, star2 and star3. I’m not passing the challenge though it isn’t difficult or complicated. Maybe the difference in ids is causing this?

Greets,
Karin Meersman

#2

Can you please post your code in a reply, so we can take a look for you?

To enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

#3

Hi,

Here’s the code. By the way, in the code, classes are used and in the explanation ids.

   <style>   
     .stars {
       background-color: white;
       height: 30px;
       width: 30px;
       border-radius: 50%;
       animation-iteration-count: infinite;
     }

     .star-1 {
       margin-top: 15%; 
       margin-left: 60%;
       animation-duration: 1s;
       animation-name: twinkle;
       animation-timing-function: linear;
       
     }

     .star-2 {
       margin-top: 25%;
       margin-left: 25%;
       animation-duration: 0.9s;
       animation-name: twinkle;
       animation-timing-function: ease-out;  
     }

     .star-3 {
       margin-top: 10%;
       margin-left: 50%;
       animation-duration: 1.1s;
       animation-name: twinkle;
   
     }

     @keyframes twinkle {
       20% {
         transform: scale(0.5);
         opacity: 0.5;
       }
     }

     #back {
       position: fixed;
       padding: 0;
       margin: 0;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
     }
   </style>

   <div id="back"></div>
   <div class="star-1 stars"></div>
   <div class="star-2 stars"></div>
   <div class="star-3 stars"></div>

The explanation is as follows:

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.

Greets and thanks,
Karin Meersman

#4

To solve this challenge, you only have to add two lines of code. The code you posted above is completely different than what should be showing in starting code. You no longer have the do divs with class=“balls” and ids of “ball1” and “ball2”.

If you do not see the following code, then click on the Reset your code button and it should revert to what I have below.

<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%;
  }
  #ball2 { 
    left:56%;
  }

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

</style>

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