Skip to content

Instantly share code, notes, and snippets.

/Reversing-CSS-Rotation-Smoothly-on-Hover.markdown

Created August 5, 2014 08:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/618fd054ea5a7f68cb41 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/618fd054ea5a7f68cb41 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by A Non Ymous.
Raw
index.html
<!-- NOTE: In Chrome there is a brief glitch during the transition after the first one -->
<div class='spiralContainer'><div class='spiral'></div></div>
Raw
Reversing-CSS-Rotation-Smoothly-on-Hover.markdown

Reversing CSS Rotation Smoothly on Hover

In order to accomplish this goal a container element is required. The trick is to have the same rotation animations apply to both the container and the content, but have them go in opposite directions and have one twice as quick as the other. Thus you pause the quicker one and unpause it on hover. NOTE: In Chrome there is currently a small glitch when transitioning after the first transition

Forked from Zach Saucier's Pen Reversing CSS Rotation Smoothly on Hover.

A Pen by Anonasaurus Rex on CodePen.

License.

Raw
style.css
.spiralContainer {
border-radius: 50%;
width:200px;
height:200px;
overflow:hidden;
margin:20px;
-webkit-animation: spin 3s linear 0s infinite reverse;
-moz-animation: spin 3s linear 0s infinite reverse;
-ms-animation: spin 3s linear 0s infinite reverse;
-o-animation: spin 3s linear 0s infinite reverse;
animation: spin 3s linear 0s infinite reverse;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
.spiral {
width:200px;
height:200px;
border-radius: 50%;
background-image: url(http://farm7.staticflickr.com/6115/6319704650_0a2bd0dcef_o.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation: spin 6s linear 0s infinite normal;
-moz-animation: spin 6s linear 0s infinite normal;
-ms-animation: spin 6s linear 0s infinite normal;
-o-animation: spin 6s linear 0s infinite normal;
animation: spin 6s linear 0s infinite normal;
}
.spiralContainer:hover {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-ms-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
@keyframes spin {
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
0% {-ms-transform: rotate(360deg); }
100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(360deg); }
100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
0% { -o-transform: rotate(360deg); }
100% { -o-transform: rotate(0deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment