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?
Performance consideration of location of @keyframes in sheet
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Performance consideration of location of @keyframes in sheet
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:
https://developer.mozilla.org/en-US/doc ... @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.
I think if there were any "serious" issues that they would be mentioned here:
https://developer.mozilla.org/en-US/doc ... @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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial