我该如何开始这个CSS动画？

Question

我有这个css动画代码，只需要按名称顺序开始动画旋转，但我不知道我该怎么做！

顺序应该是不透明度-48-25-0-3;不透明度48-25-1-3;不透明度48-25-2-3;

body {
  background-color: black;
  -webkit-backface-visibility: hidden;
}
.spin {
  right: 130px;
  top: 66px;
}
.spinner {
  position: relative;
  width: 0px;
  z-index: 2000000000;
}

<div class="spin" style="position: absolute; display: block;">
  <div class="spinner" aria-role="progressbar" style="position: relative; width: 0px; z-index: 2000000000;">
    <div style="position: absolute; top: -2px; opacity: 0.25; animation-duration: 0.454545454545455s; -webkit-animation: opacity-48-25-0-3 0.454545454545455s linear infinite; animation-timing-function: linear; animation-delay: initial; animation-iteration-count: infinite; animation-direction: initial; animation-fill-mode: initial; animation-play-state: initial; -webkit-animation-play-state: initial; animation-name: opacity-48-25-0-3;">
      <div style="position: absolute; width: 7px; height: 4px; box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; transform-origin: left 50% 0px; transform: rotate(30deg) translate(8px, 0px); border-radius: 0px; background: rgb(255, 255, 255);"></div>
    </div>
    <div style="position: absolute; top: -2px; opacity: 0.25; animation-duration: 0.454545454545455s; -webkit-animation: opacity-48-25-1-3 0.454545454545455s linear infinite; animation-timing-function: linear; animation-delay: initial; animation-iteration-count: infinite; animation-direction: initial; animation-fill-mode: initial; animation-play-state: initial; -webkit-animation-play-state: initial; animation-name: opacity-48-25-1-3;">
      <div style="position: absolute; width: 7px; height: 4px; box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; transform-origin: left 50% 0px; transform: rotate(150deg) translate(8px, 0px); border-radius: 0px; background: rgb(255, 255, 255);"></div>
    </div>
    <div style="position: absolute; top: -2px; opacity: 0.25; animation-duration: 0.454545454545455s; -webkit-animation: opacity-48-25-2-3 0.454545454545455s linear infinite; animation-timing-function: linear; animation-delay: initial; animation-iteration-count: infinite; animation-direction: initial; animation-fill-mode: initial; animation-play-state: initial; -webkit-animation-play-state: initial; animation-name: opacity-48-25-2-3;">
      <div style="position: absolute; width: 7px; height: 4px; box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; transform-origin: left 50% 0px; transform: rotate(270deg) translate(8px, 0px); border-radius: 0px; background: rgb(255, 255, 255);"></div>
    </div>
  </div>
</div>

JSFiddle : https://jsfiddle.net/nk0ec8ax/

感谢您的帮助