<div role="image" aria-label="Animation of a cartoon tree growing"></div>

* {
  margin: 0;
  padding: 0;
  border: 0;
}

@property --tall {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

@property --branch1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --branch2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --branch3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --branch4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --leaves1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --leaves2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --leaves3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --leaves4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --leaves5 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --leaves6 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --leaves7 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --leaves1y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 80%;
}
@property --leaves2y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 80%;
}
@property --leaves3y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 80%;
}
@property --leaves4y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 80%;
}
@property --leaves5y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 80%;
}
@property --leaves6y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 80%;
}
@property --leaves7y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 80%;
}
@property --leaves1x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --leaves2x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --leaves3x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --leaves4x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --leaves5x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --leaves6x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --leaves7x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}


@keyframes growBranch1 {
  0%, 60% { --branch1: 0%; }
  100% { --branch1: 22%; }
}

@keyframes growBranch2 {
  0%, 80% { --branch2: 0%; }
  100% { --branch2: 16.6%; }
}

@keyframes growBranch3 {
  0%, 80% { --branch3: 0%; }
  100% { --branch3: 6%; }
}

@keyframes growBranch4 {
  0%, 94% { --branch4: 0%; }
  100% { --branch4: 5%; }
}

@keyframes growTree {
  0%, 50% { --tall: 100%; }
  100% { --tall: -5%; }
}

@keyframes leaves1grow {
  0%, 80% {
    --leaves1: 0%;
    --leaves1x: 50%;
    --leaves1y: 50%;
  }
  100% { 
    --leaves1: 15%;
    --leaves1x: 60%;
    --leaves1y: 28%;
  }
}

@keyframes leaves2grow {
  0%, 60% {
    --leaves2: 0%;
    --leaves2x: 50%;
    --leaves2y: 70%;
  }
  100% { 
    --leaves2: 13%; 
    --leaves2x: 38%;
    --leaves2y: 50%;
  }
}

@keyframes leaves3grow {
  0%, 70% {
    --leaves3: 0%;
    --leaves3x: 50%;
    --leaves3y: 60%;
  }
  100% { 
    --leaves3: 22%;
    --leaves3y: 40%;
    --leaves3y: 28%;
  }
}

@keyframes leaves4grow {
  0%, 66% {
    --leaves4: 0%;
    --leaves4x: 50%;
    --leaves4y: 65%;
  }
  100% { 
    --leaves4: 18%;
    --leaves4x: 65%;
    --leaves4y: 55%;
  }
}

@keyframes leaves5grow {
  0%, 50% {
    --leaves5: 0%;
    --leaves5x: 50%;
    --leaves5y: 80%;
  }
  100% { 
    --leaves5: 10%;
    --leaves5x: 51%;
    --leaves5y: 12%;
  }
}

@keyframes leaves6grow {
  0%, 60% {
    --leaves6: 0%;
    --leaves6x: 50%;
    --leaves6y: 70%;
  }
  80% {
    --leaves6x: 50%;
  }
  100% { 
    --leaves6: 16%; 
    --leaves6x: 59%;
    --leaves6y: 42%; 
  }
}

@keyframes leaves7grow {
  0%, 69% {
    --leaves7: 0%;
    --leaves7x: 50%;
    --leaves7y: 73%;
  }
  100% { 
    --leaves7: 22%;  
    --leaves7x: 39%;
    --leaves7y: 52%;
  }
}

div {
  animation:
    growTree 8s linear 1,
    growBranch1 8s linear 1,
    growBranch2 8s linear 1,
    growBranch3 9s linear 1,
    growBranch4 9s linear 1,
    leaves1grow 8s linear 1,
    leaves2grow 8s linear 1,
    leaves3grow 8s linear 1,
    leaves4grow 8s linear 1,
    leaves5grow 8s linear 1,
    leaves6grow 8s linear 1,
    leaves7grow 8s linear 1;
  --tall: -5%;
  --branch1: 22%;
  --branch2: 16%;
  --branch3: 6%;
  --branch4: 5%;
  --color1: #9ACD32; /* yellowgreen*/
  --color2: #88bb22; /* darkseagreen */
  --color3: #77aa11; /* 559955 */
  --color4: #669900; /* 448833 */
  --leaves1: 15%;
  --leaves1x: 60%;
  --leaves1y: 28%;
  --leaves2: 13%;
  --leaves2x: 38%;
  --leaves2y: 50%;
  --leaves3: 22%;
  --leaves3x: 40%;
  --leaves3y: 28%;
  --leaves4: 18%;
  --leaves4x: 65%;
  --leaves4y: 55%;
  --leaves5: 10%;
  --leaves5x: 51%;
  --leaves5y: 12%;
  --leaves6: 16%;
  --leaves6x: 59%;
  --leaves6y: 42%;
  --leaves7: 22%;
  --leaves7x: 39%;
  --leaves7y: 52%;
  animation-fill-mode: forwards;
  width: 60vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image:
    /* ground */
    linear-gradient(transparent 80%, green 0 calc(80% + 1px), transparent 0),
    radial-gradient(farthest-side at 50% -50%, green 0%, transparent 100%),
    /* leaves front */
    radial-gradient(circle at var(--leaves2x) var(--leaves2y), var(--color1) calc(var(--leaves2) - 0.5vmin), var(--color1) 0 var(--leaves2), transparent 0),
    radial-gradient(circle at var(--leaves5x) var(--leaves5y), var(--color1) calc(var(--leaves5) - 0.5vmin), var(--color1) 0 var(--leaves5), transparent 0),
    /* trunk and branches */
    conic-gradient(at 50% var(--tall), transparent 178deg, brown 0 182deg, transparent 0),
    conic-gradient(at 120% 10%, transparent 249deg, brown 0 255deg, transparent 0),
    linear-gradient(185deg, brown 9%, transparent 0),
    conic-gradient(at 130% -10%, transparent 245deg, brown 0 250deg, transparent 0),
    conic-gradient(at 100% 30%, transparent 225deg, brown 0 232deg, transparent 0),
    /* leaves back */
    radial-gradient(circle at var(--leaves1x) var(--leaves1y), var(--color2) calc(var(--leaves1) - 0.5vmin), var(--color2) 0 var(--leaves1), transparent 0),
    radial-gradient(circle at var(--leaves3x) var(--leaves3y), var(--color3) calc(var(--leaves3) - 0.5vmin), var(--color3) 0 var(--leaves3), transparent 0),
    radial-gradient(circle at var(--leaves4x) var(--leaves4y), var(--color1) calc(var(--leaves4) - 0.5vmin), var(--color1) 0 var(--leaves4), transparent 0),
    radial-gradient(circle at var(--leaves6x) var(--leaves6y), var(--color4) calc(var(--leaves6) - 0.5vmin), var(--color4) 0 var(--leaves6), transparent 0),
    radial-gradient(circle at var(--leaves7x) var(--leaves7y), var(--color2) calc(var(--leaves7) - 0.5vmin), var(--color2) 0 var(--leaves7), transparent 0),
    /* sky */
    radial-gradient(farthest-side at 50% 100%, skyblue 0%, transparent 100%)
    ;
  background-size:
    /* ground */
    100% 100%,
    100% 20%,
    /* leaves front */
    100% 100%,
    100% 100%,
    /* trunk and branches */
    100% 54vmin,
    var(--branch1) var(--branch1),
    var(--branch2) var(--branch2),
    var(--branch3) var(--branch3),
    var(--branch4) var(--branch4),
    /* leaves */
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    /* sky */
    100% 80%
    ;
  background-position:
    /* ground */
    0 0,
    0% 100%,
    /* leaves front */
    0 0,
    0 0,
    /* trunk and branches */
    100% 10vmin,
    30vmin 65%,
    calc(50% - var(--branch2) / 2) calc(50% - var(--branch2) / 4),
    30vmin calc(28% - var(--branch3) / 4),
    calc(37vmin - var(--branch4) / 4) calc(56% - var(--branch4) / 3),
    /* leaves */
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    /* sky */
    0 0
    ;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion) {
  div {
    animation: none !important;
  }
}