20+ Awesome CSS Water Effects (Free Code + Demos)

Water dripping and dropping. Using bezier curve to get the correct speed

Lightweight animation between header & content. Easy to customize and apply into any website! Works with all devices and screen sizes.

This Pen is based on an awesome animation from Dribbble by Eddie Song https://dribbble.com/shots/3298162-slomo- raindrops. I chose this template because of the fast-falling raindrops and the slowly emerging ripples.

Wanted to create some rain for another pen. I tried with just CSS but the shape didn't feel right. Using randomly generated CSS variables cuts down the CSS and gives droplets random positioning and animation properties. Enjoy!

This is my first time using SVG and an early step in CSS animation. Thought that challenge was a good excuse to try something simple. The animation isn't so smooth, but I didn't spent too much time fine tuning it.

Focusing effect on either first translucent layer or the layer behind.

Ripple animation because it's more fun than my day job.

A text filling with water animation, for preloaders and such.

This is a simple animation of Github's logo, Octocat, swimming in the ocean to show how to animate sprites with CSS. Checkout the full article here https://codinhood.com/micro/animate-octocat-sprite-css

Great for profile pictures or flat buttons! Can be used with any image - image doesn't have to be round.

Ocean wave animation using SVG and CSS.

There was talk on our internal chat ( https://chat.vanila.io) about how https://itmeo.com/ have beautiful animation, and a member asked if someone can hack it. :) So I decide to examine their code and make just animation snippet code out of it.