<ul class="petals">
  <li></li>
  <li></li>
  <li></li>
</ul>

$petalSize: 100px;
$petalThickness: ($petalSize * 0.07);
$petalColour: #C43200;
$spinSpeed: .5s;

.petals li{
    position: absolute;
  
    height: $petalSize;
    width: $petalSize;

    border: $petalThickness solid $petalColour;
    border-radius: 50%;
  
    animation: $spinSpeed infinite alternate ease-in-out;
}

// collection of positions
$position:(
    translate($petalSize / 3, 0),
    translate(0, $petalSize / 6),
    translate($petalSize / 3, $petalSize / 3)
  );

// loop through petals
@for $i from 1 to length($position) + 1{
  
  .petals li:nth-child(#{$i}){
    transform: nth($position, $i);
    animation-name: petal-#{$i};
  }

  // animate petal to previous position
  $j: $i - 1;
  @if $j == 0 { $j: 3; } // loop round array

  // create animation for petal
  @keyframes petal-#{$i}{ to{ transform: nth($position, $j) } }

}