diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-animation-by-building-a-ferris-wheel/step-005.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-animation-by-building-a-ferris-wheel/step-005.md index d706fde28c..af9bafa47f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-animation-by-building-a-ferris-wheel/step-005.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-animation-by-building-a-ferris-wheel/step-005.md @@ -61,6 +61,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxWidth === '500px') border: 2px solid black; border-radius: 50%; margin-left: 50px; + position: absolute; height: 55vw; width: 55vw; } diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-animation-by-building-a-ferris-wheel/step-029.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-animation-by-building-a-ferris-wheel/step-029.md index c92ad27e87..b789a33043 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-animation-by-building-a-ferris-wheel/step-029.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-animation-by-building-a-ferris-wheel/step-029.md @@ -167,3 +167,138 @@ assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?. } --fcc-editable-region-- ``` + +# --solutions-- + +```html + + + + + Learn CSS Animations by Building a 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); + } +} + +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 25% { + background-color: yellow; + } + 50% { + background-color: purple; + } + 75% { + background-color: yellow; + } + 100% { + transform: rotate(-360deg); + } +} +```