Some time ago, I presented a talk at FrontinSampa about CSS tips, 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.
The first thing was to draw the check: the basic idea was to create a rectangle w/ borders and remove two of them, making them 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 of was how to animate the borders? So, after a while, I realized that I should think differently. Basically, I’ve drawn a rectangle, so I had to animate the shape: width and height.
The animation is simple and only animates these two properties plus the opacity to make it cooler. To finish, we just change the origin of transform to let the check centralized during the animation.