.no-csstransforms #flower{
  display: none;
}

@keyframes leaf-growth{
  from{
    height: 0%;
    width: 0%;
    left: 0%;
    top: 65%;
  }
  to{
    height: 25%;
    width: 25%;
    left: -25%;
    top: 50%;
  }
}

@keyframes stem-growth{
  from{
    height: 0%;
    width: 10%;
    
  }
  to{
    height: 100%;
    width: 100%;
  }
}

@keyframes petal-growth{
  from{
    width: 0%;
    height: 0%;
    left: 15%;
    top: 0%;
    opacity: 0;
  }
  5%{
    opacity: 1; /* to auto show on animation start */
  }
  to{
    width: 20%;
    height: 20%;
    opacity: 1;
    left: -2%;
    top: -10%;
  }
}

@keyframes center-growth{
  from{
    width: 0%;
    height: 0%;
    opacity: 0;
    top: 3%;
    left: 16%;
  }
  5%{
    opacity: 1;
  }
  to{
    width: 10%;
    height: 10%; 
    opacity: 1;
    top: 5%;
    left: 15%; /* equal to the horizontal border radius of the stem - 1/2 of width */
  }
}

@-webkit-keyframes leaf-growth{
  from{
    height: 0%;
    width: 0%;
    left: 0%;
    top: 65%;
  }
  to{
    height: 25%;
    width: 25%;
    left: -25%;
    top: 50%;
  }
}

@-webkit-keyframes stem-growth{
  from{
    height: 0%;
    width: 10%;
    
  }
  to{
    height: 100%;
    width: 100%;
  }
}

@-webkit-keyframes petal-growth{
  from{
    width: 0%;
    height: 0%;
    left: 15%;
    top: 0%;
    opacity: 0;
  }
  5%{
    opacity: 1; /* to auto show on animation start */
  }
  to{
    width: 20%;
    height: 20%;
    opacity: 1;
    left: -2%;
    top: -10%;
  }
}

@-webkit-keyframes center-growth{
  from{
    width: 0%;
    height: 0%;
    opacity: 0;
    top: 3%;
    left: 16%;
  }
  5%{
    opacity: 1;
  }
  to{
    width: 10%;
    height: 10%; 
    opacity: 1;
    top: 5%;
    left: 15%; /* equal to the horizontal border radius of the stem - 1/2 of width */
  }
}

@-moz-keyframes leaf-growth{
  from{
    height: 0%;
    width: 0%;
    left: 0%;
    top: 65%;
  }
  to{
    height: 25%;
    width: 25%;
    left: -25%;
    top: 50%;
  }
}

@-moz-keyframes stem-growth{
  from{
    height: 0%;
    width: 10%;
    
  }
  to{
    height: 100%;
    width: 100%;
  }
}

@-moz-keyframes petal-growth{
  from{
    width: 0%;
    height: 0%;
    left: 15%;
    top: 0%;
    opacity: 0;
  }
  5%{
    opacity: 1; /* to auto show on animation start */
  }
  to{
    width: 20%;
    height: 20%;
    opacity: 1;
    left: -2%;
    top: -10%;
  }
}

@-moz-keyframes center-growth{
  from{
    width: 0%;
    height: 0%;
    opacity: 0;
    top: 3%;
    left: 16%;
  }
  5%{
    opacity: 1;
  }
  to{
    width: 10%;
    height: 10%; 
    opacity: 1;
    top: 5%;
    left: 15%; /* equal to the horizontal border radius of the stem - 1/2 of width */
  }
}


/* flower */
#flower{
  position: absolute;
  right: 0px;
  top: -80px;
  width: 80px;
  height: 80px;
}
#flower .stem{
  border-top-left-radius: 20% 90%;
  border-left: 2px green solid;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0%;
  -webkit-animation-duration: 3s;
  -webkit-animation-name: stem-growth;
  -moz-animation-duration: 3s;
  -moz-animation-name: stem-growth;
  animation-duration: 3s;
  animation-name: stem-growth;
}
#flower .center{
  position: absolute;
  border-radius: 50%;
  background-color: yellow;
  z-index: 1;
  border: 1px orange solid;
  width: 10%;
  height: 10%; 
  top: 5%;
  left: 15%; /* equal to the horizontal border radius of the stem - 1/2 of width */
  -webkit-animation-delay: 3.5s;
  -webkit-animation-duration: 5s;
  -webkit-animation-name: center-growth;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-delay: 3.5s;
  -moz-animation-duration: 5s;
  -moz-animation-name: center-growth;
  -moz-animation-fill-mode: backwards;
  animation-delay: 3.5s;
  animation-duration: 5s;
  animation-name: center-growth;
  animation-fill-mode: backwards;
}
#flower .leaf{
  position: absolute;
  left: -25%;
  top: 50%;
  height: 25%;
  width: 25%;
  border-bottom-left-radius: 150% 200%; /*  1.5 * width   2 * width  */
  border-top-right-radius: 200% 150%;
  background-color: green;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 10s;
  -webkit-animation-name: leaf-growth;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 10s;
  -moz-animation-name: leaf-growth;
  -moz-animation-fill-mode: both;
  animation-delay: 1s;
  animation-duration: 10s;
  animation-name: leaf-growth;
  animation-fill-mode: both;
}
#flower .petal{
  position: absolute;
  width: 20%;
  height: 20%;
  opacity: 1;
  left: -2%;
  top: -10%;
  border-bottom-left-radius: 150% 200%;
  /*  1.5 * width   2 * width  */
  border-top-right-radius: 200% 150%;
  border-top-left-radius: 75%;
  background-color: pink;
  border: 1px red solid;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-animation-delay: 2.5s;
  -webkit-animation-duration: 7s;
  -webkit-animation-name: petal-growth;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 2.5s;
  -moz-animation-duration: 7s;
  -moz-animation-name: petal-growth;
  -moz-animation-fill-mode: both;
  animation-delay: 2.5s;
  animation-duration: 7s;
  animation-name: petal-growth;
  animation-fill-mode: both;
}
#flower .petal:hover{
  background-color: #ffdae0;
}
#flower .petal:nth-child(2){
  -webkit-transform: rotate(72deg);
  -moz-transform: rotate(72deg);
  -o-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  transform: rotate(72deg);
}
#flower .petal:nth-child(3){
  -webkit-transform: rotate(144deg);
  -moz-transform: rotate(144deg);
  -o-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  transform: rotate(144deg);
}
#flower .petal:nth-child(4){
  -webkit-transform: rotate(216deg);
  -moz-transform: rotate(216deg);
  -o-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  transform: rotate(216deg);
}
#flower .petal:nth-child(5){
  -webkit-transform: rotate(288deg);
  -moz-transform: rotate(288deg);
  -o-transform: rotate(288deg);
  -ms-transform: rotate(288deg);
  transform: rotate(288deg);
}