DEV Community

Cover image for Blobby image animation in CSS 🦠
Bryce Dorn
Bryce Dorn

Posted on

 

Blobby image animation in CSS 🦠

Was bored on a Friday and whipped up a fun little animated image using CSS:

It overlays multiple elements with the same background image rotated at different intervals. To align the images to the same plane and stitch them together each element is first rotated back (using the :before pseudo-element) then resized and positioned accordingly.

Then, by adding overflow: hidden; to the parent element, the image is cropped to the border-radius value of the pseudo-element and enables it to take a shape!

Since each image is technically in the same position but with a different parent the values for dimensions and positioning must be identical. This was slightly tricky as the height & width vary slightly with the different rotations (thanks to geometry), so the image needs to be stretched a bit.

You can see how this is handled here:

For the animation, it uses a simple keyframes rule to smoothly transition border-radius values. Each div has an animation-delay value to offset and create a directional effect.

Hope this was a good showcase of how easy it is to easily create complex animations using basic CSS/HTML!

Top comments (0)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.