Rotating an icon back and forth using css

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



Rotating an icon back and forth using css



I am trying to rotate an icon continuously to and fro. I have been able to rotate it from -45 deg to 90 deg and now I want it to go back in reverse direction. But it again starts from -45 deg to 90 deg. So, the experience of rotatition appears to be broken. Here is my code:



HTML


<div class="searchColDiv">
<i class="fa fa-search searchIcon rotating" style="font-size: 100px;" aria-hidden="true"></i>
</div>



CSS


.searchColDiv
text-align: center;


@-webkit-keyframes rotating
from
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);

to
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);



.rotating
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;



Here is jsFiddle link to my code:


jsFiddle



jsFiddle




1 Answer
1



You can use the "alternate" value aside infinite .



Making it move back and forth



...That’s easily accomplished by setting animation-direction to alternate


animation: rotating 2s linear infinite alternate;



https://jsfiddle.net/78kt1p5j/1/






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

Creating a leaderboard in HTML/JS