CSS Animation examples inefficient ?

[Freeplayg]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations

What specific section or headline is this issue about?

Examples

What information was incorrect, unhelpful, or incomplete?

The example suggests to you use margins and width for animating text across the screen.
Isn't this bad for performance due to constantly needing to recalculate the layout? I feel like this should at least be mentioned somewhere in the article if the examples aren't changed.

What did you expect to see?

Animating the transform property would be the better option, as it doesn't change the layout while animating, and is actually simpler than the proposed example?

@keyframes {
    from {
        transform: translateX(100%)
    }
}

Although https://developer.mozilla.org/en-US/docs/Web/CSS/transform may need to be linked, as well

Do you have any supporting links, references, or citations?

https://developer.mozilla.org/en-US/docs/Glossary/Reflow
https://web.dev/articles/animations-guide#triggers

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/css_animations/using_css_animations
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/css_animations/using_css_animations/index.md
• Last commit: 2cc438a
• Document last modified: 2023-12-04T18:42:56.000Z

[estelle]

You are very correct. Ugh. showing worst practices. Thank you for filing this issue. Fixing now..