Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Keyframes: Animate transform instead of width and height #27816

Merged
merged 1 commit into from
May 2, 2024
Merged

Keyframes: Animate transform instead of width and height #27816

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 1 addition & 2 deletions advanced_html_css/animation/keyframes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@

Let's see an animation in action to see what we've been talking about.

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="css,result" data-slug-hash="jOGENZz" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

Check failure on line 29 in advanced_html_css/animation/keyframes.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

advanced_html_css/animation/keyframes.md:29 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 1, After: 0 }
] [Context: "<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="css,result" data-slug-hash="jOGENZz" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md
<span>See the Pen <a href="https://codepen.io/TheOdinProjectExamples/pen/jOGENZz">
keyframes 1 longhand</a> by TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>

Check failure on line 33 in advanced_html_css/animation/keyframes.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

advanced_html_css/animation/keyframes.md:33 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 0, After: 0 }
] [Context: "</p>"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Note how the animation is already running and how it keeps repeating itself. We'll cover that `@keyframes` rule at the bottom of our example in a bit, so for now focus on the actual animation properties used in the example above:
Expand Down Expand Up @@ -79,11 +79,11 @@

Now it's time to introduce the shorthand notation for our animation properties and glimpse a little into the added flexibility of the keyframe notation. Check out the live example below then have a look at the notation.

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="css,result" data-slug-hash="zYExOLQ" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

Check failure on line 82 in advanced_html_css/animation/keyframes.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

advanced_html_css/animation/keyframes.md:82 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 1, After: 0 }
] [Context: "<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="css,result" data-slug-hash="zYExOLQ" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md
<span>See the Pen <a href="https://codepen.io/TheOdinProjectExamples/pen/zYExOLQ">
keyframes 2 shorthand</a> by TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>

Check failure on line 86 in advanced_html_css/animation/keyframes.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

advanced_html_css/animation/keyframes.md:86 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 0, After: 0 }
] [Context: "</p>"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```css
Expand All @@ -99,8 +99,7 @@
}

50% {
width: 200px;
height: 200px;
transform: scale(2);
background-color: blue;
}

Expand All @@ -116,7 +115,7 @@

### Assignment

<div class="lesson-content__panel" markdown="1">

Check failure on line 118 in advanced_html_css/animation/keyframes.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

advanced_html_css/animation/keyframes.md:118 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 1, After: 0 }
] [Context: "<div class="lesson-content__panel" markdown="1">"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md
1. Code along with [this MDN article for using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
1. Read the [@keyframes reference](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) to gain a deeper understanding of how keyframes are implemented.
1. Read this [interactive guide to keyframes](https://www.joshwcomeau.com/animation/keyframe-animations/).
Expand All @@ -124,7 +123,7 @@
- `01-button-hover`
- `02-pop-up`
- `03-dropdown-menu`
</div>

Check failure on line 126 in advanced_html_css/animation/keyframes.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

advanced_html_css/animation/keyframes.md:126 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 0, After: 1 }
] [Context: "</div>"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md

### Knowledge check

Expand Down