As a life-long C and now a Go programmer, CSS was a blackbox for me. Once I became a founder/developer of my product, that had to change and I had to learn CSS. I generally dedicate my Sundays to learning/practicing it.
I was elated with Neeraj Chopra's gold medal - a first for India in athletics (in javelin throw). To honor that, I was trying to build a pure css animation of a Javelin throw. And then a brainwave hit me, what if I added this around the athlete's name as another style for tagging entities in a NER project.
The result is:
This was achieved using only css animations. There is no Javascript at all. The major challenge was to plot a bezier curve mimicking a javelin throw. Once I was able to get the bezier curve, I had to translate the curve into pixels and percentages. The math for the curve was done on paper and the translations in pixels were hardcoded into each @keyframes percentage. (see this https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes ) The javelin was added to ::before of the tag and rotated in various angles as the animation progressed again using keyframes. The celebration animation is a static background SVG which grows and shrinks.
Although I started it as a fun task, it eventually became a bit difficult to crack. I am happy with the results and in the process learnt a lot about CSS animations 😀
Here is a closer look.
