Photograph of View of J. Edgar Hoover FBI Building from National Archives Roof

CSS check animation

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: 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.

See all posts...