Nice post Val :) I much prefer CSS animations to JS and use them wherever possible for progressive enhancement. I tend to build something as cleanly as possible first and then look back over it and ask “where can I improve the experience for users on modern browsers?” Subtlety is the key when taking advantage of animation, at least in my experience.
Separating your CSS into multiple files is an excellent idea, especially in larger projects and also in cases where you’ll have multiple devs working on the code. You can get around the issue of additional http requests by using a pre-compiler like LESS or SASS to compile many files into one, or a few, and minify them while you’re at it. This can also help you construct your animation rules with the use of dynamic mixins.
I haven’t yet found the need to create new files specifically for animation rules alone, but I like the idea of it as the code structure (@keyframe) is pretty different than the norm and often looks out of place/untidy. It can also be a little frustrating when a keyframe block lives a few hundred lines away from the animation declaration itself!
Chuck Neely
Nice post Val :) I much prefer CSS animations to JS and use them wherever possible for progressive enhancement. I tend to build something as cleanly as possible first and then look back over it and ask “where can I improve the experience for users on modern browsers?” Subtlety is the key when taking advantage of animation, at least in my experience.
Separating your CSS into multiple files is an excellent idea, especially in larger projects and also in cases where you’ll have multiple devs working on the code. You can get around the issue of additional http requests by using a pre-compiler like LESS or SASS to compile many files into one, or a few, and minify them while you’re at it. This can also help you construct your animation rules with the use of dynamic mixins.
I haven’t yet found the need to create new files specifically for animation rules alone, but I like the idea of it as the code structure (@keyframe) is pretty different than the norm and often looks out of place/untidy. It can also be a little frustrating when a keyframe block lives a few hundred lines away from the animation declaration itself!