3.1 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6140e0d875ec16262f26432b | Step 21 | 0 | step-21 |
--description--
La proprietà animation-iteration-count imposta quante volte l'animazione dovrebbe ripetersi. Può essere impostata su un numero, o su infinite per ripetere l'animazione all'infinito. La ruota panoramica non dovrebbe mai fermarsi, quindi imposta il selettore .wheel con una proprietà animation-iteration-count di infinite.
La proprietà animation-timing-function imposta la progressione dell'animazione nel tempo. Ci sono alcuni valori diversi per questa proprietà, ma vuoi che l'animazione della ruota panoramica prosegua alla stessa velocità dall'inizio alla fine. Imposta animation-timing-function su linear nel selettore .wheel.
--hints--
Il selettore .wheel dovrebbe avere una proprietà animation-iteration-count impostata su infinite.
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationIterationCount === 'infinite');
Il selettore .wheel dovrebbe avere una proprietà animation-timing-function impostata su linear.
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationTimingFunction === 'linear');
--seed--
--seed-contents--
<!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>
--fcc-editable-region--
.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;
}
--fcc-editable-region--
.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%;
}
.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);
}
}