A CSS drip animation consisting of a single div.
A Pen by Peter Butcher on CodePen.
.drip |
A CSS drip animation consisting of a single div.
A Pen by Peter Butcher on CodePen.
// Animation properties | |
$anim-width: 200px; | |
$anim-height: 250px; | |
$anim-duration: 4s; | |
// Splash properties | |
$splash-width: $anim-width; | |
$splash-height: $anim-width / 2; | |
$splash-origin: $splash-height / 2; | |
$water-level: $splash-origin; | |
// Drip properties | |
$drip-size: 15px; | |
$drip-pos: ($splash-width / 2) - ($drip-size / 2); | |
$drip-rebound: 40px; | |
$drip-re-size: 5px; | |
$drip-re-pos: ($splash-width / 2) - ($drip-re-size / 2); | |
// Colours | |
$c-drip: #FFF; | |
$c-splash: #FFF; | |
$c-bg: #43A2CE; | |
html, body { | |
margin: 0; | |
height: 100%; | |
width: 100%; | |
display: flex; | |
background-color: $c-bg; | |
} | |
.drip { | |
width: $anim-width; | |
height: $anim-height; | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: center; | |
margin: auto; | |
position: relative; | |
&:before { | |
position: absolute; | |
left: $drip-pos; | |
top: 0; | |
content: ''; | |
width: $drip-size; | |
height: $drip-size; | |
background-color: $c-drip; | |
border-radius: 50%; | |
opacity: 0; | |
animation: drip $anim-duration ease infinite; | |
} | |
&:after { | |
box-sizing: border-box; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
content: ''; | |
width: 0px; | |
height: 0px; | |
border: solid 4px $c-drip; | |
border-radius: 50%; | |
opacity: 0; | |
animation: splash $anim-duration ease infinite; | |
} | |
} | |
@keyframes drip { | |
10% { | |
top: 0; | |
opacity: 1; | |
animation-timing-function: cubic-bezier(.24,0,.76,.14); | |
} | |
25% { | |
opacity: 1; | |
top: $anim-height - $water-level; | |
animation-timing-function: ease-out; | |
width: $drip-size; | |
height: $drip-size; | |
left: $drip-pos; | |
} | |
30% { | |
opacity: 1; | |
top: $anim-height - ($water-level + $drip-rebound); | |
width: $drip-re-size; | |
height: $drip-re-size; | |
animation-timing-function: ease-in; | |
left: $drip-re-pos; | |
} | |
33% { | |
top: $anim-height - $water-level; | |
opacity: 0; | |
animation-timing-function: ease-out; | |
left: $drip-re-pos; | |
} | |
33.001% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
@keyframes splash { | |
0% { | |
opacity: 0; | |
} | |
25% { | |
bottom: $splash-height / 2; | |
left: $splash-width / 2; | |
opacity: 0; | |
width: 0px; | |
height: 0px; | |
} | |
25.001% { | |
opacity: 1; | |
} | |
33% { | |
bottom: 0; | |
left: 0; | |
opacity: 0; | |
width: $splash-width; | |
height: $splash-height; | |
} | |
33.001% { | |
bottom: $splash-height / 2; | |
left: $splash-width / 2; | |
opacity: 1; | |
width: 0px; | |
height: 0px; | |
} | |
43% { | |
bottom: 0; | |
left: 0; | |
opacity: 0; | |
width: $splash-width; | |
height: $splash-height; | |
} | |
43.001% { | |
opacity: 0; | |
} | |
} |