svg.rose.animated .rose-stem-clip {
    transform: scale(0, 0);
    transform-origin: center bottom;
    animation: rose-stem-grow 1s ease-in forwards;
  }
  @keyframes rose-stem-grow {
    0% {
      transform: scale(0, 0);
    }
    100% {
      transform: scale(1, 1);
    }
  }
  svg.rose.animated .rose-leaf {
    transform: scale(0, 0);
  }
  @keyframes rose-leaf-grow {
    0% {
      transform: scale(0, 0);
      opacity: 0;
    }
    100% {
      transform: scale(1, 1);
      opacity: 1;
    }
  }
  svg.rose.animated .rose-leaf-1 {
    transform-origin: 0 75%;
    animation: rose-leaf-grow 0.1s ease-in-out 0.8s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-leaf-2 {
    transform-origin: 40% 100%;
    animation: rose-leaf-grow 0.1s ease-in-out 0.855s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-leaf-3 {
    transform-origin: 40% 100%;
    animation: rose-leaf-grow 0.1s ease-in-out 0.88s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-leaf-4 {
    transform-origin: 20% 0%;
    animation: rose-leaf-grow 0.1s ease-in-out 0.8s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-leaf-5 {
    transform-origin: 20% 0%;
    animation: rose-leaf-grow 0.1s ease-in-out 0.88s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-leaf-6 {
    transform-origin: 80% 100%;
    animation: rose-leaf-grow 0.1s ease-in-out 1.05s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-leaf-7 {
    transform-origin: 100% 60%;
    animation: rose-leaf-grow 0.1s ease-in-out 1s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-leaf-8 {
    transform-origin: 60% 100%;
    animation: rose-leaf-grow 0.1s ease-in-out 0.95s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-leaf-9 {
    transform-origin: 60% 0%;
    animation: rose-leaf-grow 0.1s ease-in-out 0.9s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-leaf-10 {
    transform-origin: 60% 0%;
    animation: rose-leaf-grow 0.1s ease-in-out 1.05s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-petal {
    transform: scale(0, 0);
  }
  @keyframes rose-petal-grow {
    0% {
      transform: scale(0, 0);
      opacity: 0;
    }
    100% {
      transform: scale(1, 1);
      opacity: 1;
    }
  }
  svg.rose.animated .rose-petal-3 {
    transform-origin: 30% 100%;
    animation: rose-petal-grow 0.2s ease-in-out 1.05s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-petal-10 {
    transform-origin: 30% 100%;
    animation: rose-petal-grow 0.2s ease-in-out 1.15s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-petal-9 {
    transform-origin: 100% 60%;
    animation: rose-petal-grow 0.2s ease-in-out 1.13s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-petal-7 {
    transform-origin: 80% 100%;
    animation: rose-petal-grow 0.2s ease-in-out 1.18s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-petal-2 {
    transform-origin: 50% 60%;
    animation: rose-petal-grow 0.2s ease-in-out 1.29s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-petal-5 {
    transform-origin: 80% 90%;
    animation: rose-petal-grow 0.2s ease-in-out 1.25s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-petal-8 {
    transform-origin: 80% 100%;
    animation: rose-petal-grow 0.2s ease-in-out 1.1s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-petal-6 {
    transform-origin: 90% 100%;
    animation: rose-petal-grow 0.2s ease-in-out 1.17s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-petal-1 {
    transform-origin: 100% 80%;
    animation: rose-petal-grow 0.2s ease-in-out 1.18s forwards;
    transform-box: fill-box;
  }
  svg.rose.animated .rose-petal-4 {
    transform-origin: 50% 100%;
    animation: rose-petal-grow 0.2s ease-in-out 1.23s forwards;
    transform-box: fill-box;
  }
  
  body {
    display: flex;
    justify-content: center;
  }

  #rose-animation {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rose {
    max-width: 100%;
    height: auto;
}