Making Google Logo with Animation

I think google logo with animation is pretty cool. To make it, it might need some scripts or graphical libraries.

using only CSS?

But I wanted to make it only using CSS. Since there are multiple phases in this video, I decided to make them 3 different parts.

1. jumping dots.

This process looks like easy animations on dots with delays. Source Code

But to make the motion naturally, it need a little trials. Basically, I made 4 dots wrapped with containers, and put animations on both container and dots. The container makes the dots aligned on top of the container, and the dots are combinations of 2 circles and its body. The top circle is (::before) connected on top of the rectangular body, and only the rectangular body is resized. and its position is controlled by changing height.

2. merging dots.

3. opening circles

This process need a little thought process. Source Code