<div class="container">
<div class="sky"></div>
<div class="ground">
<div class="seed">
<div class="left-root"></div>
<div class="right-root-bunch">
<div class="rr1"></div>
<div class="rr2"></div>
<div class="rr3"></div>
</div>
</div>
<div class="stem">
<div class="leaves-div">
<div class="leaf1"></div>
<div class="leaf2"></div>
</div>
<div class="s0"></div>
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
</div>
</div>
</div>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-image: linear-gradient(to bottom, #5da5d8, lightblue);
}
.container{
width:100vw;
min-height:100vh;
overflow-x: hidden;
}
.ground{
width:100vw;
min-height:50vh;
background-color: #7c3c21;
position: relative;
top:50vh;
z-index: -3;
background-image: linear-gradient(to top, #33312d, #3b3530, #605345);
}
.seed{
width:8vw;
height:5vw;
border-radius:50%;
background-color: yellow;
background-image: linear-gradient(to top, #ffd31d, #f6d743, #f6f578);
position: absolute;
top:10vw;
left:40vw;
}
.left-root{
width:0.2vw;
height:5vw;
background-color: #fff;
border-radius:
96% 0% 100% 0% / 85% 10% 100% 25%;
position: relative;
top:1.5vw;
z-index: -1;
transform:rotateZ(5deg);
animation:leftRootGrows 3s ease forwards;
}
@keyframes leftRootGrows{
0%{
height:0;
}
100%{
height:5vw;
}
}
@keyframes rightRootsGrow{
0%{
opacity: 0;
height:0;
}
100%{
opacity: 1;
height:5vw;
}
}
.right-root-bunch{
display: flex;
position: relative;
left:7vw;
bottom:1.5vw;
z-index: -1;
opacity: 0;
animation:rightRootsGrow 3s ease forwards;
animation-delay:3s;
}
.rr1, .rr2{
width:0.2vw;
height:5vw;
background-color: #fff3cd;
border-radius:
96% 0% 100% 0% / 85% 10% 100% 25%;
transform:rotateZ(-5deg);
margin:0.1vw;
animation:rightRootsGrow 3s ease forwards;
animation-delay:3s;
}
.rr2{
transform:rotateZ(-15deg);
}
.rr3{
width:3vw;
height:5vw;
border-radius:100%;
border-right:3px solid #fff3cd;
position: relative;
right:2vw;
animation:rightRootsGrow 3s ease forwards;
animation-delay:3s;
}
.stem{
display: flex;
flex-direction:column;
position: relative;
left:46vw;
bottom:25vw;
z-index: -1;
animation:stemPositionChanges 4s ease forwards;
animation-delay:5.8s;
}
@keyframes stemPositionChanges{
0%{
bottom:10vw;
}
100%{
bottom:25vw;
}
}
@keyframes s3Grows{
0%{
opacity: 0;
height:0;
}
100%{
opacity: 1;
height:8vw;
}
}
.s3{
width:2.8vw;
height:8vw;
background-color: green;
transform:rotateZ(20deg);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
background-image: linear-gradient(to right, #677d41, #6d813f, #a2a74e, #adb75d);
opacity: 0;
animation:s3Grows 3s ease forwards;
animation-delay:6s;
}
.s2{
width:1.9vw;
height:6vw;
background-color: green;
transform:rotateZ(-1deg);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
position: relative;
left:1.6vw;
top:0.8vw;
background-image: linear-gradient(to right, #677d41, #6d813f, #a2a74e, #adb75d);
opacity: 0;
animation:s3Grows 3s ease forwards;
animation-delay:6s;
}
@keyframes opacityBecomesOne{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.s1{
width:1.3vw;
height:8vw;
background-color: green;
transform:rotateZ(8deg);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
position: relative;
left:2.3vw;
top:2vw;
background-image: linear-gradient(to right, #677d41, #6d813f, #a2a74e, #adb75d);
opacity: 0;
animation:opacityBecomesOne 2s ease forwards;
animation-delay:8.4s;
}
.s0{
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
width:0.8vw;
height:5vw;
background-color: green;
transform:rotateZ(10deg);
position: relative;
left:3.45vw;
top:2.5vw;
background-image: linear-gradient(to right, #677d41, #6d813f, #a2a74e, #adb75d);
opacity: 0;
animation:opacityBecomesOne 2s ease forwards;
animation-delay:8.7s;
}
.leaves-div{
display: flex;
position: relative;
top:4.5vw;
left:2vw;
z-index: 1;
}
.leaf1, .leaf2{
border-radius:96% 0% 100% 0% / 85% 2% 100% 0%;
background-image: linear-gradient(to left, #709955, #dbe250);
width:2vw;
height:8vw;
opacity: 0;
animation:opacityBecomesOne 2s ease forwards;
animation-delay:9s;
}
.leaf1{
transform:rotateZ(-30deg);
border-radius:100% 0% 100% 0% / 100% 0% 100% 0%;
background-image: linear-gradient(to right, #709955, #709955, #b7cba5);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.