[小程式] SVG leafs animation

<div class="content"></div>
<svg>
  <symbol>
    <g id="Page-1">
      <g id="Artboard" transform="translate(-204.000000, -68.000000)">
        <g id="Group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.5" transform="translate(204.000000, 68.000000)">
          <g id="Path-2" fill="#7A00E5">
            <path d="M21.6238453,0.420059518 C21.632571,0.408730588 21.6412993,0.397401616 21.6500303,0.386072603 L21.6500303,0.453248786 C50.0383799,36.4575299 50.0383799,72.9000997 21.6500303,109.780958 L21.6500303,109.849771 C21.6410866,109.838442 21.6321456,109.827113 21.6232074,109.815784 C21.6144872,109.827116 21.6057602,109.838444 21.5970305,109.849771 L21.5970305,109.782595 C-6.79131354,73.7783065 -6.79131354,37.3357508 21.597014,0.454906691 L21.5970305,0.386072603 C21.6059729,0.397399806 21.6149125,0.408727052 21.6238493,0.420054341 Z"
            id="Combined-Shape"></path>
          </g>
        </g>
      </g>
    </g>
  </symbol>
</svg>

html,
body {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  background: #333;
  .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#leaf1 { animation: leaf1 ease 0.1s both; }
#leaf2 { animation: leaf2 ease 0.1s both 0.1s; }
#leaf3 { animation: leaf3 ease 0.1s both 0.2s; }
#leaf4 { animation: leaf4 ease 0.1s both 0.3s; }
#leaf5 { animation: leaf5 ease 0.1s both 0.4s; }
#leaf6 { animation: leaf6 ease 0.1s both 0.5s; }
#leaf7 { animation: leaf7 ease 0.1s both 0.6s; }
#leaf8 { animation: leaf8 ease 0.1s both 0.7s; }
#leaf9 { animation: leaf9 ease 0.1s both 0.8s; }
#leaf10 { animation: leaf10 ease 0.1s both 0.9s; }
#leaf11 { animation: leaf11 ease 0.1s both 1.0s; }
#leaf12 { animation: leaf12 ease 0.1s both 1.1s; }
#leaf13 { animation: leaf13 ease 0.1s both 1.2s; }
#leaf14 { animation: leaf14 ease 0.1s both 1.3s; }
#leaf15 { animation: leaf15 ease 0.1s both 1.3s; }
#leaf16 { animation: leaf16 ease 0.1s both 1.4s; }
#leaf17 { animation: leaf17 ease 0.1s both 1.5s; }
#leaf18 { animation: leaf18 ease 0.1s both 1.6s; }
#leaf19 { animation: leaf19 ease 0.1s both 1.7s; }
#leaf20 { animation: leaf20 ease 0.1s both 1.8s; }
#leaf21 { animation: leaf21 ease 0.1s both 1.9s; }
#leaf22 { animation: leaf22 ease 0.1s both 2.0s; }
#leaf23 { animation: leaf23 ease 0.1s both 2.2s; }
#leaf24 { animation: leaf24 ease 0.1s both 2.3s; }
#leaf25 { animation: leaf25 ease 0.1s both 2.4s; }
#leaf26 { animation: leaf26 ease 0.1s both 2.5s; }
#leaf27 { animation: leaf27 ease 0.1s both 2.6s; }
#leaf28 { animation: leaf28 ease 0.1s both 2.7s; }
#leaf29 { animation: leaf29 ease 0.1s both 2.8s; }
#leaf30 { animation: leaf30 ease 0.1s both 2.9s; }
#leaf31 { animation: leaf31 ease 0.1s both 3.0s; }
#leaf32 { animation: leaf32 ease 0.1s both 3.1s; }
#leaf33 { animation: leaf33 ease 0.1s both 3.2s; }
#leaf34 { animation: leaf34 ease 0.1s both 3.3s; }
#leaf35 { animation: leaf35 ease 0.1s both 3.4s; }
#leaf36 { animation: leaf36 ease 0.1s both 3.5s; }

@for $i from 1 through 36 {
  @keyframes leaf#{$i} {
    0% {
      opacity: 0;
      transform: rotate(#{$i * 10}deg);
      transform-origin: 23px 0;
    }
    100% {
      transform: rotate(#{$i * 10 + 10}deg);
      transform-origin: 23px 0;
    }
  }
}

!(function(d) {
    const _content = d.body.querySelector('.content');
  let leafs = '';

  for (let i = 1; i < 37; i++) {
    leafs += `<svg id="leaf${i}" width="43px" height="110px" viewBox="0 0 43 110"><use xlink:href="#Page-1" fill="none" stroke="#7aa20d" stroke-width="2" /></svg>` 
  }

  _content.innerHTML = leafs;
})(document)

Shenglian / -WORK_TIP

[小程式] SVG leafs animation #46