StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Using CSS3 animation, we can make the block rotate from 0 to 180 degree on hover and then rotate from 180 to 360 degree when not hovered.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#block { position: absolute; width: 100px; height: 50px; left: 100px; top: 100px; background: black; color: white; animation-name: out; /* animation to rotate on hover out*/ animation-duration: 1s; /* duration for the animation, increase it to slow it down*/ } #block:hover { animation-name: in; /* animation to rotate on hover */ animation-duration: 1s; } @keyframes in { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes out { from { transform: rotate(180deg); } to { transform: rotate(360deg); } }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div id="block"></div></code></pre> </div> </div> </p> <hr> <p><strong>Note:</strong> </p> <ol> <li>This causes the block to rotate on page load also. There is no solution for this other than using JS and nullify the effect on page load.</li> <li>As you mentioned, there is a bit of snapping when we hover in and out at very quick intervals. This can be explained by having a look at the answers <a href="https://stackoverflow.com/questions/31806649/how-to-run-the-css3-animation-to-the-end-if-the-selector-is-not-matching-anymore/31833533#31833533">here</a> and <a href="https://stackoverflow.com/questions/32224802/extend-the-final-state-of-the-first-animation-for-translated-element/32225884#32225884">here</a>. Once the animation is no longer applicable (that is, the selector is no longer applicable), the animation will abruptly stop and return back to its original un-transformed position.</li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload