Learn CSS Animation by Building a Ferris Wheel - Step 23

This step asked for animation shorthand. Here’s the instruction:
Set the animation property of the .cabin rule to cabins 10s linear infinite.
I copied “cabins 10s linear infinite” and pasted it after the animation property in the cabin selector. Then, the instruction showed my code didn’t pass. Not sure where the problem is.

  **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);
}

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

.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_14_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Safari/605.1.15

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

Link to the challenge:

I have added this code to the starting code in this step and the challenge passed for me

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