The key is you need to change size of stem and leaves with animation.
Example
<div class="drop">
</div>
<div class="w3-container">
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
</div>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
.wrapper {
width:51px;
display:block;
float: right;
}
.box {
position:relative;
margin:auto;
display:block;
margin-top:8%;
width:300px;
height:200px;
background:none;
}
.stem {
position:absolute;
width:1%;
height:1%;
left:49%;
bottom:0%;
background:#70B77E;
}
.leaf {
position:absolute;
width:700%;
height:10%;
border-radius:50%;
background:#70B77E;
}
.leaf .line {
position:absolute;
width:80%;
height:1%;
background:rgba(0,0,0,0.1);
top:48%;
}
.leaf01 {
top:70%;
left:50%;
transform:rotate(-25deg);
}
.leaf02 {
top:50%;
right:50%;
transform:rotate(205deg);
}
.leaf03 {
top:30%;
left:50%;
transform:rotate(-25deg);
}
.leaf04 {
top:20%;
right:50%;
transform:rotate(205deg);
}
.leaf05 {
top:-17%;
left:-120%;
transform:rotate(-60deg);
}
.leaf06 {
top:-9%;
right:22%;
transform:rotate(195deg);
}
/* --- ANIMATION --- */
.stem, .leaf {
animation-duration: 1.2s!important;
animation-fill-mode:forwards;
}
.stem.rain {
animation: grow 1s linear 1;
}
@keyframes grow {
0% {
bottom:0%;
width:1%;
height:10%;
}
100% {
bottom:0%;
width:3%;
height:100%;
}
}
.stem.rain .leaf {
animation: leafGrow 1s linear 1;
animation-fill-mode:forwards;
}
@keyframes leafGrow {
0% {
width:0%;
height:0%;
}
100% {
width:700%;
height:10%;
}
}
.stem.rain .leaf05 {
animation: topLeafRight 1s linear 1;
}
@keyframes topLeafRight {
0% {
top:5%;
width:0%;
height:0%;
left:10%;
}
100% {
width:700%;
height:10%;
top:-17%;
left:-120%;
}
}
.stem.rain .leaf06 {
animation: topLeafLeft 1s linear 1;
}
@keyframes topLeafLeft {
0% {
top:0%;
width:0%;
height:0%;
}
100% {
width:700%;
height:10%;
top:-9%;
}
}
.drop {
position:absolute;
top:30px;
left:20px;
width: 50px;
height: 50px;
border: none;
-webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
font: normal 100%/normal Arial, Helvetica, sans-serif;
background:#17BEBB;
-webkit-transform: rotateZ(-45deg) ;
transform: rotateZ(-45deg) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
animation:rain 2s linear 1;
animation-fill-mode:forwards;
cursor:pointer;
z-index:9999;
}
</style>
<script>
$(".drop").click(function() {
$(".stem").addClass("rain");
setTimeout(function () {
$('.stem').removeClass('rain');
}, 1200);
});
</script>
