feat(curriculum): css ferris wheel (#43460)
* 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>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
5ffd65e4e7
commit
229fa686ca
@ -101,7 +101,8 @@
|
||||
"css-nutrition-label": {
|
||||
"title": "CSS Nutrition Label",
|
||||
"intro": ["", ""]
|
||||
}
|
||||
},
|
||||
"css-ferris-wheel": { "title": "CSS Ferris Wheel", "intro": ["", ""] }
|
||||
}
|
||||
},
|
||||
"javascript-algorithms-and-data-structures": {
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Introduction to the CSS Ferris Wheel
|
||||
block: css-ferris-wheel
|
||||
superBlock: Responsive Web Design
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the CSS Ferris Wheel
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@ -81,5 +81,6 @@
|
||||
"registration-form": "HTML-CSS",
|
||||
"css-photo-gallery": "HTML-CSS",
|
||||
"css-grid-magazine": "HTML-CSS",
|
||||
"css-nutrition-label": "HTML-CSS"
|
||||
"css-nutrition-label": "HTML-CSS",
|
||||
"css-ferris-wheel": "HTML-CSS"
|
||||
}
|
||||
|
||||
130
curriculum/challenges/_meta/css-ferris-wheel/meta.json
Normal file
130
curriculum/challenges/_meta/css-ferris-wheel/meta.json
Normal file
@ -0,0 +1,130 @@
|
||||
{
|
||||
"name": "CSS Ferris Wheel",
|
||||
"isUpcomingChange": true,
|
||||
"dashedName": "css-ferris-wheel",
|
||||
"order": 15,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"6140c7e645d8e905819f1dd4",
|
||||
"Step 1"
|
||||
],
|
||||
[
|
||||
"6140c9d35015ae0ba0c250e8",
|
||||
"Step 2"
|
||||
],
|
||||
[
|
||||
"6140cbeec34e970dfe75e710",
|
||||
"Step 3"
|
||||
],
|
||||
[
|
||||
"6140cd32d018ed0f600eefce",
|
||||
"Step 4"
|
||||
],
|
||||
[
|
||||
"617ace7d831f9c16a569b38a",
|
||||
"Step 5"
|
||||
],
|
||||
[
|
||||
"6140cdebd39d6a101e747529",
|
||||
"Step 6"
|
||||
],
|
||||
[
|
||||
"6140cfc08ca9c5128c3e6478",
|
||||
"Step 7"
|
||||
],
|
||||
[
|
||||
"6140d0069049f5139d78da40",
|
||||
"Step 8"
|
||||
],
|
||||
[
|
||||
"6140d10d50636e14695013b2",
|
||||
"Step 9"
|
||||
],
|
||||
[
|
||||
"6140d1a351e88f159ed54fca",
|
||||
"Step 10"
|
||||
],
|
||||
[
|
||||
"6140d263016325162fd076fe",
|
||||
"Step 11"
|
||||
],
|
||||
[
|
||||
"6140d2b687a2cd17bac5730c",
|
||||
"Step 12"
|
||||
],
|
||||
[
|
||||
"6140d36b8b747718b50d4b7a",
|
||||
"Step 13"
|
||||
],
|
||||
[
|
||||
"6140d3dc359b371b1a21d783",
|
||||
"Step 14"
|
||||
],
|
||||
[
|
||||
"6140d4bc9db3c81c51a09ab7",
|
||||
"Step 15"
|
||||
],
|
||||
[
|
||||
"6140d94b5fab7f1d73c9bedb",
|
||||
"Step 16"
|
||||
],
|
||||
[
|
||||
"6140dc5e13d0c81e7496f182",
|
||||
"Step 17"
|
||||
],
|
||||
[
|
||||
"6140dd77e0bc5a1f70bd7466",
|
||||
"Step 18"
|
||||
],
|
||||
[
|
||||
"6140de31b1f5b420410728ff",
|
||||
"Step 19"
|
||||
],
|
||||
[
|
||||
"6140df547f09402144e40b92",
|
||||
"Step 20"
|
||||
],
|
||||
[
|
||||
"6140e0d875ec16262f26432b",
|
||||
"Step 21"
|
||||
],
|
||||
[
|
||||
"6140f4b5c1555a2960de1e5f",
|
||||
"Step 22"
|
||||
],
|
||||
[
|
||||
"614100d7d335bb2a5ff74f1f",
|
||||
"Step 23"
|
||||
],
|
||||
[
|
||||
"61410126fa3a6d2b3cda502e",
|
||||
"Step 24"
|
||||
],
|
||||
[
|
||||
"6141019eadec6d2c6c6f007b",
|
||||
"Step 25"
|
||||
],
|
||||
[
|
||||
"6141026ec9882f2d39dcf2b8",
|
||||
"Step 26"
|
||||
],
|
||||
[
|
||||
"6169ab1aaeb4cd1174def700",
|
||||
"Step 27"
|
||||
],
|
||||
[
|
||||
"6169b1357fcb701bb5efc619",
|
||||
"Step 28"
|
||||
],
|
||||
[
|
||||
"6169b284950e171d8d0bb16a",
|
||||
"Step 29"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,178 @@
|
||||
---
|
||||
id: 6140c7e645d8e905819f1dd4
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Begin with the standard boilerplate. Add your `DOCTYPE` declaration, your `html` element, your `head` and `body` elements.
|
||||
|
||||
Add your `meta` element for the correct `charset`, your `title` element, and a `link` element for the `./styles.css` file.
|
||||
|
||||
Set the `title` to `CSS Ferris Wheel`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should contain the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
You should include a space after the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
You should define the document type to be `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
You should close the `DOCTYPE` declaration with a `>` after the type.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have an opening tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
Your `html` element should be below the `DOCTYPE` declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/^\s*<!DOCTYPE\s+html\s*>[\s\S]*<\s*html\s*>/gi));
|
||||
```
|
||||
|
||||
You should have an opening `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
You should have an opening `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
The `head` and `body` elements should be siblings.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
The `head` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
The `body` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
Your code should have a `meta` element.
|
||||
|
||||
```js
|
||||
const meta = document.querySelector('meta');
|
||||
assert.exists(meta);
|
||||
```
|
||||
|
||||
Your `meta` element should have a `charset` attribute with the value `UTF-8`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<meta[\s\S]+?charset=('|"|`)UTF-8\1/)
|
||||
```
|
||||
|
||||
Your code should have a `title` element.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
Your project should have a title of `CSS Ferris Wheel`.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim()?.toLowerCase(), 'css ferris wheel')
|
||||
```
|
||||
|
||||
Remember, the casing and spelling matter for the title.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim(), 'CSS Ferris Wheel');
|
||||
```
|
||||
|
||||
Your code should have a `link` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link/)
|
||||
```
|
||||
|
||||
Your `link` element should be a self-closing element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<link[\w\W\s]+\/>/i));
|
||||
```
|
||||
|
||||
Your `link` element should be within your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` attribute with the value `stylesheet`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
|
||||
```
|
||||
|
||||
Your `link` element should have an `href` attribute with the value `styles.css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 6140c9d35015ae0ba0c250e8
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `div` within your `body` element and give it a `class` of `wheel`.
|
||||
|
||||
Inside your new `div`, add six `span` elements with a `class` set to `line`, and six `div` elements with a `class` set to `cabin`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` within your `body` element.
|
||||
|
||||
```js
|
||||
const divs = [...document.querySelector('body')?.children].filter(child => child?.localName === 'div');
|
||||
assert(divs?.length === 1);
|
||||
```
|
||||
|
||||
Your `div` within your `body` element should have a `class` of `wheel`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body div')?.classList?.contains('wheel'));
|
||||
```
|
||||
|
||||
Your `.wheel` element should have six `span` elements within.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.wheel span')?.length === 6);
|
||||
```
|
||||
|
||||
Your six `span` elements within the `.wheel` element should have a `class` of `line`.
|
||||
|
||||
```js
|
||||
const spans = [...document.querySelectorAll('.wheel span')];
|
||||
assert(spans?.every(span => span?.classList?.contains('line')));
|
||||
assert(document.querySelectorAll('.line')?.length === 6);
|
||||
```
|
||||
|
||||
Your `.wheel` element should have six `div` elements within.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.wheel div')?.length === 6);
|
||||
```
|
||||
|
||||
Your six `div` elements within the `.wheel` element should have a `class` of `cabin`.
|
||||
|
||||
```js
|
||||
const divs = [...document.querySelectorAll('.wheel div')];
|
||||
assert(divs?.every(div => div?.classList?.contains('cabin')));
|
||||
assert(document.querySelectorAll('.cabin')?.length === 6);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 6140cbeec34e970dfe75e710
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a selector for your `.wheel` element. Start by setting the `border` to `2px solid black`, the `border-radius` to `50%`, and the `margin-left` to `50px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.wheel` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel'));
|
||||
```
|
||||
|
||||
Your `.wheel` selector should have a `border` property set to `2px solid black`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.border === '2px solid black');
|
||||
```
|
||||
|
||||
Your `.wheel` selector should have a `border-radius` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius === '50%');
|
||||
```
|
||||
|
||||
Your `.wheel` selector should have a `margin-left` property set to `50px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft === '50px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 6140cd32d018ed0f600eefce
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `position` property of the `.wheel` selector to `absolute`. Set the `height` and `width` both to `55vw`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.wheel` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `.wheel` selector should have a `height` property set to `55vw`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.height === '55vw');
|
||||
```
|
||||
|
||||
Your `.wheel` selector should have a `width` property set to `55vw`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.width === '55vw');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 617ace7d831f9c16a569b38a
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `.wheel` selector a `max-height` and `max-width` property both set to `500px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.wheel` selector should have a `max-height` property set to `500px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxHeight === '500px');
|
||||
```
|
||||
|
||||
Your `.wheel` selector should have a `max-width` property set to `500px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxWidth === '500px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 6140cdebd39d6a101e747529
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a selector for your `.line` elements. Start by setting the `background-color` to `black`, the `width` to `50%`, and the `height` to `2px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.line` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line'));
|
||||
```
|
||||
|
||||
Your `.line` selector should have a `background-color` property set to `black`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.backgroundColor === "black");
|
||||
```
|
||||
|
||||
Your `.line` selector should have a `width` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.width === "50%");
|
||||
```
|
||||
|
||||
Your `.line` selector should have a `height` property set to `2px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.height === "2px");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 6140cfc08ca9c5128c3e6478
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `.line` selector's `position` property to `absolute`, the `left` property to `50%`, and the `top` property to `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.line` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `.line` selector should have a `left` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.left === '50%');
|
||||
```
|
||||
|
||||
Your `.line` selector should have a `top` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.top === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 6140d0069049f5139d78da40
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `transform-origin` property is used to set the point around which a CSS transformation is applied. For example, when performing a `rotate` (which you will do later in this project), the `transform-origin` determines around which point the element is rotated.
|
||||
|
||||
Give the `.line` selector a `transform-origin` property of `0% 0%`. This will offset the origin point by `0%` from the left and `0%` from the top, setting it to the top left corner of the element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.line` selector should have a `transform-origin` property set to `0% 0%`.
|
||||
|
||||
```js
|
||||
const transformOrigin = new __helpers.CSSHelp(document).getStyle('.line')?.transformOrigin;
|
||||
assert(transformOrigin === '0% 0%' || transformOrigin === '0% 0% 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 6140d10d50636e14695013b2
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a selector to target your second `.line` element. Set the `transform` property to `rotate(60deg)`.
|
||||
|
||||
Remember that the `transform` property allows you to manipulate the shape of an element. In this case, using the `rotate(60deg)` value will rotate the element around its `transform-origin` point by 60 degrees clockwise.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `.line:nth-of-type(2)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)'));
|
||||
```
|
||||
|
||||
Your `.line:nth-of-type(2)` selector should have a `transform` property set to `rotate(60deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,126 @@
|
||||
---
|
||||
id: 6140d1a351e88f159ed54fca
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using the same pattern, create a separate selector for the third `.line`, the fourth `.line`, the fifth `.line`, and the sixth `.line`.
|
||||
|
||||
Set the `transform` property for the third `.line` to `rotate(120deg)`, the fourth to `rotate(180deg)`, the fifth to `rotate(240deg)`, and the sixth to `rotate(300deg)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `.line:nth-of-type(3)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)'));
|
||||
```
|
||||
|
||||
Your `.line:nth-of-type(3)` selector should have a `transform` property set to `rotate(120deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')?.transform === 'rotate(120deg)');
|
||||
```
|
||||
|
||||
You should create a `.line:nth-of-type(4)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)'));
|
||||
```
|
||||
|
||||
Your `.line:nth-of-type(4)` selector should have a `transform` property set to `rotate(180deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')?.transform === 'rotate(180deg)');
|
||||
```
|
||||
|
||||
You should create a `.line:nth-of-type(5)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)'));
|
||||
```
|
||||
|
||||
Your `.line:nth-of-type(5)` selector should have a `transform` property set to `rotate(240deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')?.transform === 'rotate(240deg)');
|
||||
```
|
||||
|
||||
You should create a `.line:nth-of-type(6)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)'));
|
||||
```
|
||||
|
||||
Your `.line:nth-of-type(6)` selector should have a `transform` property set to `rotate(300deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform === 'rotate(300deg)');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 6140d263016325162fd076fe
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.cabin` selector. Set the `background-color` to `red`, the `width` to `20%`, and the `height` to `20%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cabin` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin'));
|
||||
```
|
||||
|
||||
Your `.cabin` selector should have a `background-color` property set to `red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.backgroundColor === 'red');
|
||||
```
|
||||
|
||||
Your `.cabin` selector should have a `width` property set to `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.width === '20%');
|
||||
```
|
||||
|
||||
Your `.cabin` selector should have a `height` property set to `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.height === '20%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.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--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 6140d2b687a2cd17bac5730c
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `.cabin` a `position` of `absolute`, and a `border` of `2px solid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cabin` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `.cabin` selector should have a `border` property set to `2px solid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.border === '2px solid');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 6140d36b8b747718b50d4b7a
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `.cabin` to have a `transform-origin` property of `50% 0%`. This will set the origin point to be offset `50%` from the left and `0%` from the top, placing it in the middle of the top edge of the element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cabin` selector should have a `transform-origin` property set to `50% 0%`.
|
||||
|
||||
```js
|
||||
const transformOrigin = new __helpers.CSSHelp(document).getStyle('.cabin')?.transformOrigin;
|
||||
assert(transformOrigin === '50% 0%' || transformOrigin === '50% 0% 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 6140d3dc359b371b1a21d783
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Time to position the cabins around the wheel. Select the first `.cabin` element. Set the `right` property to `-8.5%` and the `top` property to `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cabin:nth-of-type(1)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)'));
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(1)` selector should have a `right` property set to `-8.5%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)')?.right === '-8.5%');
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(1)` selector should have a `top` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)')?.top === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,196 @@
|
||||
---
|
||||
id: 6140d4bc9db3c81c51a09ab7
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Continuing the pattern, select the following `.cabin` elements and apply the specific rules to them:
|
||||
|
||||
- The second `.cabin` should have the `right` property set to `17%` and the `top` property set to `93.5%`.
|
||||
- The third `.cabin` should have the `right` property set to `67%` and the `top` property set to `93.5%`.
|
||||
- The fourth `.cabin` should have the `left` property set to `-8.5%` and the `top` property set to `50%`.
|
||||
- The fifth `.cabin` should have the `left` property set to `17%` and the `top` property set to `7%`.
|
||||
- The sixth `.cabin` should have the `right` property set to `17%` and the `top` property set to `7%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cabin:nth-of-type(2)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)'));
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(2)` selector should have a `right` property set to `17%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.right === '17%');
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(2)` selector should have a `top` property set to `93.5%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.top === '93.5%');
|
||||
```
|
||||
|
||||
You should have a `.cabin:nth-of-type(3)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)'));
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(3)` selector should have a `right` property set to `67%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.right === '67%');
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(3)` selector should have a `top` property set to `93.5%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.top === '93.5%');
|
||||
```
|
||||
|
||||
You should have a `.cabin:nth-of-type(4)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)'));
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(4)` selector should have a `left` property set to `-8.5%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.left === '-8.5%');
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(4)` selector should have a `top` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.top === '50%');
|
||||
```
|
||||
|
||||
You should have a `.cabin:nth-of-type(5)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)'));
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(5)` selector should have a `left` property set to `17%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.left === '17%');
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(5)` selector should have a `top` property set to `7%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.top === '7%');
|
||||
```
|
||||
|
||||
You should have a `.cabin:nth-of-type(6)` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)'));
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(6)` selector should have a `right` property set to `17%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)')?.right === '17%');
|
||||
```
|
||||
|
||||
Your `.cabin:nth-of-type(6)` selector should have a `top` property set to `7%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)')?.top === '7%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,137 @@
|
||||
---
|
||||
id: 6140d94b5fab7f1d73c9bedb
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `@keyframes` at-rule is used to define the flow of a CSS animation. Within the `@keyframes` rule, you can create selectors for specific points in the animation sequence, such as `0%` or `25%`, or use `from` and `to` to define the start and end of the sequence.
|
||||
|
||||
`@keyframes` rules require a name to be assigned to them, which you use in other rules to reference. For example, the `@keyframes freeCodeCamp { }` rule would be named `freeCodeCamp`.
|
||||
|
||||
Time to start animating. Create a `@keyframes` rule named `wheel`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `@keyframes` rule.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `@keyframes` rule should be named `wheel`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 6140dc5e13d0c81e7496f182
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You now need to define how your animation should start. To do this, create a `0%` rule within your `@keyframes wheel` rule. The properties you set in this nested selector will apply at the beginning of your animation.
|
||||
|
||||
As an example, this would be a `12%` rule:
|
||||
|
||||
```css
|
||||
@keyframes freecodecamp {
|
||||
12% {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `@keyframes wheel` rule should have a `0%` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.keyText === '0%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
@keyframes wheel {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 6140dd77e0bc5a1f70bd7466
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `0%` rule a `transform` property set to `rotate(0deg)`. This will start the animation with no rotation.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `0%` selector should have a `transform` property set to `rotate(0deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
@keyframes wheel {
|
||||
0% {
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 6140de31b1f5b420410728ff
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now give the `@keyframes wheel` rule a `100%` selector. Within that, set the `transform` to `rotate(360deg)`. By doing this, your animation will now complete a full rotation.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `@keyframes wheel` rule should have a `100%` selector.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules
|
||||
assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
|
||||
```
|
||||
|
||||
Your `100%` selector should come after your `0%` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText === '100%')
|
||||
```
|
||||
|
||||
Your `100%` selector should have a `transform` property set to `rotate(360deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform === 'rotate(360deg)')
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
@keyframes wheel {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 6140df547f09402144e40b92
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `animation-name` property is used to link a `@keyframes` rule to a CSS selector. The value of this property should match the name of the `@keyframes` rule. Give your `.wheel` selector an `animation-name` property set to `wheel`.
|
||||
|
||||
The `animation-duration` property is used to set how long the animation should sequence to complete. The time should be specified in either seconds (`s`) or milliseconds (`ms`). Set your `.wheel` selector to have an `animation-duration` property of `10s`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.wheel` selector should have an `animation-name` property set to `wheel`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationName === 'wheel');
|
||||
```
|
||||
|
||||
Your `.wheel` selector should have an `animation-duration` property set to `10s`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationDuration === '10s');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
--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;
|
||||
}
|
||||
--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);
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 6140e0d875ec16262f26432b
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `animation-iteration-count` property sets how many times your animation should repeat. This can be set to a number, or to `infinite` to indefinitely repeat the animation. Your Ferris wheel should never stop, so set the `.wheel` selector to have an `animation-iteration-count` of `infinite`.
|
||||
|
||||
The `animation-timing-function` property sets how the animation should progress over time. There are a few different values for this property, but you want the Ferris wheel animation to run at the same rate from start to finish. Set the `animation-timing-function` to `linear` in your `.wheel` selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.wheel` selector should have an `animation-iteration-count` property set to `infinite`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationIterationCount === 'infinite');
|
||||
```
|
||||
|
||||
Your `.wheel` selector should have an `animation-timing-function` property set to `linear`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationTimingFunction === 'linear');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
--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);
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,191 @@
|
||||
---
|
||||
id: 6140f4b5c1555a2960de1e5f
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create another `@keyframes` rule with the name `cabins`. Use the same properties as your `@keyframes wheel`, copying both the `0%` and `100%` rules, but set the `transform` property of the `100%` selector to `rotate(-360deg)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `@keyframes` rule.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 2);
|
||||
```
|
||||
|
||||
Your new `@keyframes` rule should be named `cabins`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes');
|
||||
assert(rules?.[0]?.name === 'cabins' || rules?.[1]?.name === 'cabins');
|
||||
```
|
||||
|
||||
Your new `@keyframes` rule should come after your `@keyframes wheel` rule.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.name === 'cabins');
|
||||
```
|
||||
|
||||
You should not change the name of your `@keyframes wheel` rule.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
|
||||
```
|
||||
|
||||
Your `@keyframes cabins` rule should have a `0%` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.keyText === '0%');
|
||||
```
|
||||
|
||||
Your `0%` selector should have a `transform` property set to `rotate(0deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)');
|
||||
```
|
||||
|
||||
Your `@keyframes cabins` rule should have a `100%` selector.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules
|
||||
assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
|
||||
```
|
||||
|
||||
Your `100%` selector should come after your `0%` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '100%')
|
||||
```
|
||||
|
||||
Your `100%` selector should have a `transform` property set to `rotate(-360deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.transform === 'rotate(-360deg)')
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```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%;
|
||||
}
|
||||
|
||||
.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--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,149 @@
|
||||
---
|
||||
id: 614100d7d335bb2a5ff74f1f
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: 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`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s linear 0s infinite normal none running cabins');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```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);
|
||||
}
|
||||
|
||||
--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);
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,151 @@
|
||||
---
|
||||
id: 61410126fa3a6d2b3cda502e
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make your cabin animation seem more like a natural swinging motion, you can use the `ease-in-out` timing function. This setting will tell the animation to start and end at a slower pace, but move more quickly in the middle of the cycle.
|
||||
|
||||
Replace `linear` to `ease-in-out` in the `.cabin` selector.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cabin` selector should have an `animation` property set to `cabins 10s ease-in-out infinite`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.cabin {
|
||||
background-color: red;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
transform-origin: 50% 0%;
|
||||
animation: cabins 10s linear infinite;
|
||||
}
|
||||
--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);
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 6141019eadec6d2c6c6f007b
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can use `@keyframes` rules to control more than just the transformation of an element. In the `0%` selector of your `@keyframes cabins`, set the `background-color` to `yellow`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `0%` selector should have a `background-color` property set to `yellow`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor === 'yellow');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```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);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,291 @@
|
||||
---
|
||||
id: 6141026ec9882f2d39dcf2b8
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Between the `0%` and `100%` selectors, add a `50%` selector. This will apply in the middle of the animation cycle. Set the `background-color` to `purple`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `50%` selector in your `@keyframes cabins` rule.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
|
||||
assert(rules?.[0]?.keyText === '50%' || rules?.[1]?.keyText === '50%' || rules?.[2]?.keyText === '50%');
|
||||
```
|
||||
|
||||
Your `50%` selector should be between your `0%` and `100%` selectors.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '50%');
|
||||
```
|
||||
|
||||
Your `50%` selector should have a `background-color` property set to `purple`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'purple');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
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);
|
||||
background-color: yellow;
|
||||
}
|
||||
50% {
|
||||
background-color: purple;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -0,0 +1,154 @@
|
||||
---
|
||||
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
|
||||
<!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>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@ -0,0 +1,164 @@
|
||||
---
|
||||
id: 6169b1357fcb701bb5efc619
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new `25%` selector between your `0%` and `50%` selectors. Give this new selector the `background-color` property set to `yellow`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `25%` selector in your `@keyframes cabins` rule.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
|
||||
assert(rules?.[0]?.keyText === '25%' || rules?.[1]?.keyText === '25%' || rules?.[2]?.keyText === '25%' || rules?.[3]?.keyText === '25%');
|
||||
```
|
||||
|
||||
Your `25%` selector should be between your `0%` and `50%` selectors.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '25%');
|
||||
```
|
||||
|
||||
Your `25%` selector should have a `background-color` property set to `yellow`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'yellow');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```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);
|
||||
}
|
||||
50% {
|
||||
background-color: purple;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,169 @@
|
||||
---
|
||||
id: 6169b284950e171d8d0bb16a
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, create a new `75%` selector between your `50%` and `100%` selectors. Give this new selector a `background-color` property set to `yellow.`
|
||||
|
||||
With that, your animation is much smoother and your Ferris wheel is complete.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `75%` selector in your `@keyframes cabins` rule.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
|
||||
assert(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%');
|
||||
```
|
||||
|
||||
Your `75%` selector should be between your `50%` and `100%` selectors.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText === '75%');
|
||||
```
|
||||
|
||||
Your `75%` selector should have a `background-color` property set to `yellow`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor === 'yellow');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
```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);
|
||||
}
|
||||
25% {
|
||||
background-color: yellow;
|
||||
}
|
||||
50% {
|
||||
background-color: purple;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -30,5 +30,6 @@
|
||||
"registration-form": "Registration Form",
|
||||
"css-photo-gallery": "CSS Photo Gallery",
|
||||
"css-grid-magazine": "CSS Grid Magazine",
|
||||
"css-nutrition-label": "CSS Nutrition Label"
|
||||
"css-nutrition-label": "CSS Nutrition Label",
|
||||
"css-ferris-wheel": "CSS Ferris Wheel"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user