Today I discovered that it's possible to use cubic Bézier curves to specify the speed curve of an animation. I was not entirely satisfied with the result I was getting with the various ease functions and I was looking for something more flexible; that's when I discovered cubic-bezier.
This is an example of how to use this type of curve with animation:
Although I am not new to Bézier curves, I found the tool on https://cubic-bezier.com to be pretty useful as it's very intuitive and CSS-specific. It has a nice “Preview & compare” feature to compare the configured curve with any of the other available animation functions.
I am more and more impressed with the amount of features that modern CSS has to offer.
I am a big fan of animations. I became interested in Web animation when Flash was a thing, then continued with 3D animation, and recently I got interested in CSS animation too. I think I already know most of the animation concepts (for example what keyframes are, and how to combine them), so I am eager to try some with CSS.
As for color gradients, it is easy to overdo animation and get a kitsch result. What I am after, anyway, is not an entire application or game entirely made in CSS, nor a website where a lot of things are going on at the same time, as I personally dislike those. I don't have a specific idea yet, but I am keen to learn what is possible, especially after seeing how easy it is to get a nice scroll behavior with just a CSS property.
At the moment, I am going through the explanations and examples on the Mozilla developer docs and the W3Schools reference docs. There is a nice collection of ready-to-use CSS animations on Animate.css, but for some reason I have been attracted by the “Growing/Shrinking Bars” idea on a Hubspot blog post I've come across (with code on CodePen).