.petal {
    position: absolute;
    width: 50px;
    height: 65px;
    background-color: #FF69B4;
    border-radius: 50% 50% 0% 50%;
  }
  .top-bottom {
    animation: top_bottom 25s linear infinite;
  }
  .left-right {
    animation: left_right 25s linear infinite;
  }
  .twist-2 {
    animation: twist_2 10s linear infinite;
  }
  .fade {
    animation: fade 25s linear infinite;
  }
  @keyframes top_bottom {
    from { transform: translateY(0vh); }
    to   { transform: translateY(100vh); }
  }
  
  @keyframes left_right {
    from { transform: translateX(0vw); }
    to   { transform: translateX(100vw); }
  }
  @keyframes twist_2{
    from { transform: rotateX(0); }
    to   { transform: rotateX(360deg); }
  }
  @keyframes fade {
     0% { opacity: 1.0; }
     10%{ opacity: 0.9; }
     20%{ opacity: 0.8; }
     30%{ opacity: 0.7; }
     40%{ opacity: 0.6; }
     50%{ opacity: 0.5; }
     60%{ opacity: 0.4; }
     70%{ opacity: 0.3; }
     80%{ opacity: 0.2; }
     90%{ opacity: 0.1; }
    100%{ opacity: 0.0; }
  }
  

.petal-0  { top: 0vw; left:   0vh; animation-delay: 400ms; }
.petal-1  { top: 0vw; left:   10vh; animation-delay: 400ms; }
.petal-2  { top: 0vw; left:   20vh; animation-delay: 400ms; }
.petal-3  { top: 0vw; left:   30vh; animation-delay: 400ms; }
.petal-4  { top: 0vw; left:   40vh; animation-delay: 400ms; }
.petal-5  { top: 0vw; left:   50vh; animation-delay: 400ms; }
.petal-6  { top: 0vw; left:   60vh; animation-delay: 400ms; }
.petal-7  { top: 0vw; left:   70vh; animation-delay: 400ms; }
.petal-8  { top: 0vw; left:   80vh; animation-delay: 400ms; }
.petal-9  { top: 0vw; left:   90vh; animation-delay: 400ms; }
.petal-10 { top: 0vw; left:  100vh; animation-delay: 400ms; }