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

merged 1 commit into from May 2, 2024

Conversation

royalh23
Copy link
Contributor

Because

Using the transform property instead of the width and height properties when animating elements is less expensive since it occurs during composition.

This PR

  • Changes the last example in the lesson so that it uses transform instead of width and height to animate the ball.

Issue

Related to #27788

Additional Information

Pull Request Requirements

  • I have thoroughly read and understand The Odin Project curriculum contributing guide
  • The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
  • The Because section summarizes the reason for this PR
  • The This PR section has a bullet point list describing the changes in this PR
  • If this PR addresses an open issue, it is linked in the Issue section
  • If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
  • If any lesson files are included in this PR, they follow the Layout Style Guide

@github-actions github-actions bot added the Content: Advanced HTML/CSS Involves the Advanced HTML/CSS course label Apr 19, 2024
@MaoShizhong
Copy link
Contributor

For maintainers: This will need the 2nd codepen in the Keyframes lesson amended to reflect the CSS change here.

@MaoShizhong MaoShizhong linked an issue Apr 19, 2024 that may be closed by this pull request
Advanced HTML and CSS - Keyframes: Animate transform instead of width and height #27788
Closed
3 tasks
MaoShizhong
MaoShizhong approved these changes May 2, 2024
View reviewed changes
Copy link
Contributor

@MaoShizhong MaoShizhong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that the codepen has been updated, let's merge! 🚀

@MaoShizhong MaoShizhong merged commit c39ac0f into TheOdinProject:main May 2, 2024
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MaoShizhong MaoShizhong MaoShizhong approved these changes

Assignees
No one assigned
Labels
Content: Advanced HTML/CSS Involves the Advanced HTML/CSS course
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Advanced HTML and CSS - Keyframes: Animate transform instead of width and height
2 participants
@royalh23 @MaoShizhong