Learn CSS Animation by Building a Ferris Wheel - Step 23

**Tell us what’s happening:
I add the animation property correctly but it shows the error

Test

Sorry, your code does not pass. You’re getting there.

Hint

Your .cabin selector should have an animationproperty set to cabins 10s linear infinite.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Ferris Wheel</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div class="wheel">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>

      <div class="cabin"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
    </div>
  </body>
</html>
/* file: styles.css */
.wheel {
  border: 2px solid black;
  border-radius: 50%;
  margin-left: 50px;
  position: absolute;
  height: 55vw;
  width: 55vw;
  max-width: 500px;
  max-height: 500px;
  animation-name: wheel;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.line {
  background-color: black;
  width: 50%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0% 0%;
}

.line:nth-of-type(2) {
  transform: rotate(60deg);
}
.line:nth-of-type(3) {
  transform: rotate(120deg);
}
.line:nth-of-type(4) {
  transform: rotate(180deg);
}
.line:nth-of-type(5) {
  transform: rotate(240deg);
}
.line:nth-of-type(6) {
  transform: rotate(300deg);
}


/* User Editable Region */

.cabin{
  background-color: red;
  width: 20%;
  height: 20%;
  position: absolute;
  border: 2px solid;
  transform-origin: 50% 0%;
  animation: cabins 10s linear infinite

}

/* User Editable Region */


.cabin:nth-of-type(1) {
  right: -8.5%;
  top: 50%;
}
.cabin:nth-of-type(2) {
  right: 17%;
  top: 93.5%;
}
.cabin:nth-of-type(3) {
  right: 67%;
  top: 93.5%;
}
.cabin:nth-of-type(4) {
  left: -8.5%;
  top: 50%;
}
.cabin:nth-of-type(5) {
  left: 17%;
  top: 7%;
}
.cabin:nth-of-type(6) {
  right: 17%;
  top: 7%;
}

@keyframes wheel {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
}

@keyframes cabins {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.2 Safari/605.1.15

Challenge: Learn CSS Animation by Building a Ferris Wheel - Step 23

Link to the challenge:

your answer works for me, tho its missing a semicolon ‘;’

Its possible something may have been deleted by mistake in another part of the code. Try resetting the step then try your answer again.

I try that but it show the same error

Hello!
I suggest checking for any browser extensions that may be causing the issue. As well, you could try submitting it from another browser. Clearing the cache may help, as well.

I have had to do this, at times, for my own correct codes to submit.

Happy coding! :slight_smile:

1 Like

This also not working

1 Like

If you have tried everything else, you could try installing a different browser.
Its common to have multiple types of browsers on the same device to test projects.

If none of the browsers on your device work, you could try uninstalling and reinstalling one of them.
Sometimes having a fresh new browser can fix the problem.
Tho I’d NOT suggest making it a habit.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.