--- id: 6169ab1aaeb4cd1174def700 title: Step 27 challengeType: 0 dashedName: step-27 --- # --description-- Because the animation is on an infinite loop and the start and end colors are not the same, the transition appears jerky when it switches back to yellow from red. To start fixing this, remove the `background-color` from your `0%` selector. # --hints-- Your `0%` selector should not have a `background-color` property. ```js assert(!new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor); ``` # --seed-- ## --seed-contents-- ```html Ferris Wheel
``` ```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 ease-in-out 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); } } --fcc-editable-region-- @keyframes cabins { 0% { transform: rotate(0deg); background-color: yellow; } 50% { background-color: purple; } 100% { transform: rotate(-360deg); } } --fcc-editable-region-- ```