animate实现单向轨道旋转

html:

<div class="right fif-right">

                        <div class="imgBox">

                              <img class="wow bounceIn" src="../../public/static/images/special/ftoulDown/down5-img1.png" alt="" />

                              <img class="imgLast moving2" src="../../public/static/images/special/ftoulDown/down5-img2.png" alt="" />

                        </div>

                  </div>

css:

.moving2 {

transform-origin: 50% 50%;

animation: rotate2 40snormalinfinitelinear;

}

@keyframes rotate2{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-ms-transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);-ms-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-ms-transform:rotate(360deg)}}

@-webkit-keyframes rotate2{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-ms-transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);-ms-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-ms-transform:rotate(360deg)}}