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 40 s normal infinite linear ;

}

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

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