How to animate on click with CSS?
I have a fixed button to turn the page to the top. When you hover over with your mouse, it animates (and animates back when there is no mouse). But if you click on the icon, the animation doesn't roll back. The arrow should move 360º backward.
Structure
<div id='back-to-top'>
<a href="#" class="hvr-icon-spin"></a>
</div>
Working code with css http://jsfiddle.net/7vrw4abx/
+3
source to share
1 answer
You bind the style with: focus, so when the element is clicked, it will stay the same until you click. Change the following
.hvr-icon-spin:hover:before, .hvr-icon-spin:focus:before, .hvr-icon-spin:active:before {
to that
.hvr-icon-spin:hover:before, .hvr-icon-spin:active:before {
( Demo )
+2
source to share