Performance consideration of location of @keyframes in sheet

Discussion about CSS related issues.
Post Reply
Rank III - Intermediate
Rank III - Intermediate
Posts: 61
Joined: Sun Feb 04, 2018 10:19 am

Performance consideration of location of @keyframes in sheet

Post by TomHTML »

Conventionally, @keyframes rules are placed at the bottom of a style sheet. But from a performance standpoint, wouldn't it be better to put them at the top of the sheet so that when an animation is referenced in a style rule, it's already been parsed by the interpreter and can immediately be enacted?

This is probably a low-level question. I reckon that the sheet is fully parsed and reconciled (re: rule specificity) before any of it is applied, but it hit me: just as you need to declare a variable/function in JavaScript before you can reference it in your code, shouldn't @keyframe animations be defined in a sheet before they're referenced?

Are there any best-practices re: performance specs on this?
User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3649
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Performance consideration of location of @keyframes in sheet

Post by Albert Wiersch »

I am not aware of any performance issues/specs with the placement of @keyframes in CSS style sheets.

I think if there were any "serious" issues that they would be mentioned here: ... @keyframes

Personally, for performance and battery life (for devices using batteries), I'd avoid animations unless you are sure that they are worth the potential performance and battery life hit. Of course simple animations that are short lived shouldn't be too bad but going overboard with them might cause issues.

In any case, I doubt the location of @keyframes in a style sheet is significant.
Post Reply