css3 - How can i Start this CSS animation? -
i have css animation code need start animation in name order make spin, dont know how can !
the order should opacity-48-25-0-3; opacity-48-25-1-3; opacity-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/
thanks help
Comments
Post a Comment