CSS Animals with your own hands

The first thing that was made is the animated owl. When hovering over the owl, it is able to blink and flap its wings. We will dwell upon it.

The owl was separated into 2 parts - the head and the body

Let’s start with the head. I separated it as well (eyes, beak, ears)

All the elements are simple geometric figures that are positioned relative to each other, and their extra parts are hidden by overlapping other elements. As a result, an integral structure should be obtained.

Since there are hundreds of lines of styles, then I propose to analyze only a small part. The link to the entire code will be available in the end.

The head and the eyes are blocks that are simply given border-radius and there is nothing unusual in them.

The beak and the ears are made with the help of clip-path. It allows to draw on points as on a canvas.

As a result we get something like this:


As it was described above the owl is able to blink and flap wings. It is done by means of 3 animations - eyelids and one animation for each wing.

That's all. We have analyzed the main points. The remaining parts are made by analogy and should not cause difficulties. See the full version of the code and a experiment on https://codepen.io

See the Pen CSS OWL by Mikhail (@mikhail1992) on CodePen.

For those who are interested in it there is the example of a Cat

See the Pen CSS Cat by Mikhail (@mikhail1992) on CodePen.