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

Advanced HTML and CSS - Keyframes: Animate transform instead of width and height #27788

Closed
3 tasks done
royalh23 opened this issue Apr 12, 2024 · 4 comments · Fixed by #27816
Closed
3 tasks done

Advanced HTML and CSS - Keyframes: Animate transform instead of width and height #27788

royalh23 opened this issue Apr 12, 2024 · 4 comments · Fixed by #27816
Assignees
@royalh23

Comments

@royalh23
Copy link
Contributor

royalh23 commented Apr 12, 2024 •
edited

Checks

Describe your suggestion

I was doing the Keyframes lesson and realized that instead of using transform to scale the ball in the last example, width and height properties are animated instead. We've already been taught that animating any properties other than transform and opacity are expensive, and thus I think animating width and height in the lesson might confuse some learners. Here's the relevant code snippet:

@keyframes change-color {
  from {
    background-color: red;
  }
  
  50% {
    width: 200px; // use transform: scale(2) instead
    height: 200px;  
    background-color: blue;
  }

  to {
    background-color: green;
  }
}

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-keyframes

(Optional) Discord Name

No response

(Optional) Additional Comments

No response
@KevinMulhern
Copy link
Member

Thanks @royalh23, @TheOdinProject/html-css can we get you're input on this one please?

@MaoShizhong
Copy link
Contributor

I think it makes sense to use a transform there instead.
Technically, transform: scale(2) is a little different in that it'll just scale the element itself, including border size, whereas animating the width/height will only change the space taken up by the element as a whole (regardless of box-sizing).

Don't think that's a differentiation that's important to include, and I can't think of many cases with that kind of animation where you'd purposely want to just change the width/height and not just scale the whole thing. Since the lesson says we have also specified that the ball double in **size.**, we should be fine to just replace the relevant code.

The codepen will need to be changed accordingly as well.

@MaoShizhong
Copy link
Contributor

Going to assign you @royalh23. I think changing the height/width adjustment to simply transform: scale(2); makes much more sense here (esp. since we've already covered transforms).

We will handle the codepen on our side so both parts are changed at roughly the same time.

@royalh23
Copy link
Contributor Author

@MaoShizhong Gotcha. Will make a PR tomorrow

@royalh23 royalh23 mentioned this issue Apr 19, 2024
Merged
7 tasks
@MaoShizhong MaoShizhong linked a pull request Apr 19, 2024 that will close this issue
Keyframes: Animate transform instead of width and height #27816
Merged
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@royalh23 royalh23

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Keyframes: Animate transform instead of width and height royalh23/curriculum
3 participants
@KevinMulhern @royalh23 @MaoShizhong