just a few random tips in the hopes that, by repeating them, the concepts will finally stick in my mind. i've learned and re-learned this information at least three times by now.
when animating CSS properties,
make sure that you've explicitly declared the base state.
for example, if i'm animating a box shadow that appears on hover and the base state is effectively `box-shadow: initial`, i still ought to declare the box shadow property as though it were invisible:
.animate {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
transition: box-shadow 0.4s;
}
.animate:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
the same goes for transform animations, which are especially janky on text with no base state. use `translate3d(x, y, z)` instead of `translateX` or `translateY` which triggers hardware acceleration -> smoother animation.
.animate {
transform: translate3d(0, 0, 0);
transition: transform 0.2s;
}
.animate:hover {
transform: translate3d(0, -1em, 0);
}
avoid animating margins and top/bottom/left/right - prefer transform where possible.
sometimes `backface-visibility: hidden` helps - it depends on the animation.
selectively use `will-change: transform` for heavy transform animations, as a last resort.
anyway, we'll see if i remember next time i have to animate something. 🫠