Learn CSS Animation by Building a Ferris Wheel - Step 23

HTML-CSS
1

Tell us what’s happening:
Instruction: Step 23

With your .wheel selector, you created four different properties to control the animation. For your .cabin selector, you can use the animation property to set these all at once.

Set the animation property of the .cabin rule to cabins 10s linear infinite. This will set the animation-name, animation-duration, animation-timing-function, and animation-iteration-count properties in that order.

This seems like a really simple step, but I just do not understand why it isn’t working. I’ve tried copy and pasting to make sure it’s not a typo, but I just keep getting the same hint.

Hint: Your .cabin selector should have an animation property 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.4.1 Safari/605.1.15

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

Link to the challenge:

2

When I copy and paste your code it passes the challenge. There are a few steps you can try.

  1. Try restarting and refreshing the challenge to see if it will pass
  2. make sure you dont have any extensions running. Things like ad blocker, and dark mode can cause the challenge to fail.
  3. If none of the above work, then try submitting in the challenge in a different browser
2 Likes
3

I pasted in your entire CSS file and the challenge passes for me, so I don’t think there’s anything wrong with your code.

Have you tried resetting the lesson and re-entering the same code?
Or refresh the page with CTRL+F5 and do the same?
Alternately, do you have any browser extensions active? They can interfere with the tests sometimes, so disabling them all could help.
Or you could try a different browser?

2 Likes
4

Thank you both! These were really helpful suggestions.

5

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