style.scss

@import url("https://fonts.googleapis.com/css?family=Montserrat+Alternates");

html {
  height: 200vh;
  background: radial-gradient(ellipse at center, #dbb800 0%, #688acc 50%);
  cursor: pointer;
}

body {
  height: 100vh;
  overflow: hidden;
  border-bottom: 10vh #339545 solid;
  box-sizing: border-box;
  position: relative;
}

h1 {
  text-align: center;
  color: white;
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 40px;
  position: absolute;
  z-index: 1;
  width: 100%;
  top: 0vh;
  transform: translate(0, 100vh);
  animation: move 1s 2.5s forwards;
}

@keyframes move {
  0% {
    transform: translate(0, 100vh);
  }
  100% {
    transform: translate(0vh, 0);
  }
}

.sunflwr {
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);

  &__leaf--left {
    width: 0%;
    height: 20%;
    border-radius: 0% 50% 0% 50%;
    position: absolute;
    background: lighten(#556d39, 10%);
    top: 70%;
    left: 45%;
    transform: translate(-100%, -50%) rotate(-20deg);
    animation: sunflwr__leaf forwards 1s 0.5s;
  }

  &__leaf--right {
    @extend .sunflwr__leaf--left;
    top: 80%;
    left: 55%;
    transform: translate(0%, -50%) rotate(-70deg);
  }

  @keyframes sunflwr__leaf {
    0% {
      width: 0%;
      border: 0px solid black;
    }
    100% {
      width: 20%;
      border: 2px solid black;
    }
  }

  &__stem {
    position: absolute;
    transform: translate(-50%, 0%);
    width: 5%;
    height: 60%;
    background: #556d39;
    left: 50%;
    bottom: 0%;
    border: 2px solid black;
    animation: sunflwr__stem forwards 1s;
  }

  @keyframes sunflwr__stem {
    0% {
      height: 0;
    }
    100% {
      height: 60%;
    }
  }

  &__center {
    // width: 30%;
    // height: 30%;
    border-radius: 50%;
    background-color: #3c1f03;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: 2;
    animation: sunflwr__center 1s 1s forwards;
  }

  @keyframes sunflwr__center {
    0% {
      width: 0%;
      height: 0%;
    }
    100% {
      width: 25%;
      height: 25%;
    }
  }

  &__pedal--1 {
    // width: 15%;
    // height: 50%;
    border-radius: 50%;
    background: #f2fe00;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 40%;
    // border: 2px solid black;
    animation: grow-pedal-back 1s 1.5s forwards;
  }

  &__pedal--2 {
    @extend .sunflwr__pedal--1;
    transform: translate(-50%, -50%) rotate(30deg);
  }

  &__pedal--3 {
    @extend .sunflwr__pedal--1;
    transform: translate(-50%, -50%) rotate(60deg);
  }
  &__pedal--4 {
    @extend .sunflwr__pedal--1;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  &__pedal--5 {
    @extend .sunflwr__pedal--1;
    transform: translate(-50%, -50%) rotate(120deg);
  }
  &__pedal--6 {
    @extend .sunflwr__pedal--1;
    transform: translate(-50%, -50%) rotate(150deg);
  }

  @keyframes grow-pedal-back {
    0% {
      width: 0%;
      height: 0%;
      border: 0px solid black;
    }
    100% {
      width: 15%;
      height: 45%;
      border: 2px solid black;
    }
  }

  &__pedal--7 {
    @extend .sunflwr__pedal--1;
    // height: 40%;
    // width: 10%;
    border-radius: 20% 50% 20% 50%;
    transform: translate(-50%, -50%) rotate(15deg);
    animation: grow-pedal-front 1s 2s forwards;
  }
  &__pedal--8 {
    @extend .sunflwr__pedal--7;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &__pedal--9 {
    @extend .sunflwr__pedal--7;
    transform: translate(-50%, -50%) rotate(75deg);
  }
  &__pedal--10 {
    @extend .sunflwr__pedal--7;
    transform: translate(-50%, -50%) rotate(105deg);
  }
  &__pedal--11 {
    @extend .sunflwr__pedal--7;
    transform: translate(-50%, -50%) rotate(135deg);
  }
  &__pedal--12 {
    @extend .sunflwr__pedal--7;
    transform: translate(-50%, -50%) rotate(165deg);
  }
  @keyframes grow-pedal-front {
    0% {
      height: 0%;
      width: 0%;
      border: 0px solid black;
    }
    100% {
      height: 35%;
      width: 10%;
      border: 2px solid black;
    }
  }
}