CODEWITHSUNDEEP
csstranslate-animation
Henrique Barcelos
Henrique Barcelos

Reputation: 491

How to animate back after click with CSS?

I have a fixed button to roll the page to the beginning. When you put the mouse hover, it animates (and animate back when mouse is out). But if you hit the icon, the animation doesn't roll back. The arrow should translate 360º back.

The structure is

   <div id='back-to-top'>
  <a href="#" class="hvr-icon-spin"></a>
</div>

The workin code with css is http://jsfiddle.net/7vrw4abx/

Upvotes: 2

Views: 177

Answers (1)

user4639281
user4639281

Reputation:

You are associating the style with :focus so on click of the item it will stay the same, until you click away. Change the following

.hvr-icon-spin:hover:before, .hvr-icon-spin:focus:before, .hvr-icon-spin:active:before {

to this

.hvr-icon-spin:hover:before, .hvr-icon-spin:active:before {

(Demo)

Upvotes: 2

Related Questions