How to create pure CSS illustrations and animate them - Part 3

Agathe Cocco on September 04, 2018

This is the third part in a three-part series about CSS illustrations and animations. In this last part, we are going to build an animated lighth... [Read Full]
markdown guide

Thanks Agathe, I really enjoyed this series.

CSS animation is one of my weakness so this helped me a lot in gaining more understanding about it. I still have a lot to learn but that's the exciting part.:D

Hope to see more of your posts.



This post is just awesome! Although I had some issues with z-index and some elements just didn't want to show up cause of "bottom: 0;" in CodePen(Any guess why?). At least I made it in my own way of sort and I learned a hell lot out of these 3 posts.

Thank you and keep up the good work!


Not sure... if you add the link to your pen, I'd be happy to have a look


oh dear! that's because there's no size or position for the 'lighthouse-group' element. This is 100% my fault, I forgot this step in the tutorial (I've now amended the post). If you add the below CSS, and use the bottom property again, your issues should be fixed

.lighthouse-group {
width: 50%;
height: 100%;
bottom: 0;
left: 0;
z-index: 2;


thank you for the amazing tutorial. you can have a look at my work following your steps


Agathe, these were a blast to run through this morning! They've sparked my creative motor!

code of conduct - report abuse