Growing Plant: CSS Animation

growing-plant-css-animation.markdown

Growing Plant: CSS Animation

A Pen by Meg Meyers on CodePen.

License.

index.pug

.drop
.wrapper
	.box
		.stem
			.leaf.leaf01
				.line
			.leaf.leaf02
				.line
			.leaf.leaf03
				.line
			.leaf.leaf04
				.line
			.leaf.leaf05
				.line
			.leaf.leaf06
				.line
		.pot
		.pot-top
	

script.js

$(".drop").click(function() {
	$(".stem").addClass("rain");
	
	setTimeout(function () { 
		$('.stem').removeClass('rain');
	}, 1200);  
});

scripts

<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.css

body{
  background: #A9DDD6;
}

.wrapper {
	position:absolute;
	bottom:0;
	width:100%;
}

.box {
	position:relative;
	margin:auto;
	display:block;
	margin-top:8%;
	width:600px;
	height:600px;
	background:none;
}

.pot {
	position:absolute;
	width:20%;
	height:20%;
	bottom:0;
	left:40%;
	background:#FCAA67;
	-webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
	clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
	box-shadow: inset 0 16px 20px rgba(0,0,0,0.3);
}

.pot-top {
	position:absolute;
	width:22%;
	height:5%;
	bottom:17%;
	left:39%;
	background:#FCAA67;
	border-radius:3px;
}

.stem {
	position:absolute;
	width:2%;
	height:50%;
	left:49%;
	bottom:20%;
	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:-40%;
		width:1%;
	}
	
	100% {
		bottom:20%;
		width:2%;
	}
}

.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;
}