229fa686ca
* feat: initial infra * feat: initial step breakdown * feat: expand instructions * feat: write tests! * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: more tweaks * chore: ferris → Ferris * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: no lang * chore: fix lint issues Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
2.8 KiB
2.8 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 614100d7d335bb2a5ff74f1f | Step 23 | 0 | step-23 |
--description--
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.
--hints--
Your .cabin selector should have an animation property set to cabins 10s linear infinite.
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s linear 0s infinite normal none running cabins');
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a 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>
.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);
}
--fcc-editable-region--
.cabin {
background-color: red;
width: 20%;
height: 20%;
position: absolute;
border: 2px solid;
transform-origin: 50% 0%;
}
--fcc-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);
}
}