Some time ago, I presented a talk at FrontinSampa about tips of CSS and one of the topics was about a check animation that I tried to do using only CSS.
I tried in different ways and it’s funny because when you’re developing and animating in CSS you need to think like CSS even doing that be something really strange.
So, the first thing was to draw the check: the basic idea was to create a rectangle w/ borders and remove two of them making like a letter L. After that we only use the
rotate and we have the check.
So, now it’s the fun part: how to make the animation? The first thing that I thought was how to animate the borders? So, after a while, I realized that I should think different. Basically, I’ve drawn a rectangle, so I had to animate the shape:
The animation is simple and only animates these two properties plus the
opacity to make it cooler. To finish, we just change the
transform to let the check centralized during the animation.