Learn CSS Animation by Building a Ferris Wheel - Step 23

Tell us what’s happening:
Describe your issue in detail here.

“ Your .cabin selector should have an animation property set to cabins 10s linear infinite

.cabin {
background-color: red;
width: 20%;
height: 20%;
position: absolute;
border: 2px solid;
transform-origin: 50% 0%;
animation: 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:

Welcome to the community!
Please tell us what the problem is in your own words. Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

2 Likes

Thanks for your reply. It’s not accepting my code (animation: cabins 10s linear infinite;) although I’m almost positive I did everything right.

The code is OK.

Try the following:

  1. Reset the step
  2. Refresh the page (F5)
  3. Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.
  4. Change the browser.

Thank you!

Unfortunately, I’ve tried the code both in Safari and Chrome (and I don’t believe I have extensions on but I’ll doublecheck) and it hasn’t been working.

Could it be because I’m working on an iPad?

If you have installed Chrome on your iPad, then you should have been able to work through this lesson. If you already passed some challenges on your device, then you should try all the mentioned solutions in my previous post multiple times.

Anyway, it is a good idea to try the lessons on different devices and OS, if you have that possibility.

1 Like

The solution ended up being simply submitting it on my PC instead of my iPad. Thanks for the help!

1 Like

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