Need help with animating a fontawesome icon? I ran into an issue where the animation works perfectly inside a span element, but it stops working when placed inside an anchor tag in Chrome. Interestingly, it still works fine on IE.
I am currently utilizing FontAwesome 3.2.1 for this task. Here's the code snippet:
HTML:
<a>
<i class="icon-wrench rotator"></i>
</a>
CSS:
.rotator {
display: inline-block;
-webkit-animation: rotate 2.5s 4 ease;
-webkit-transform-origin:90% 35%;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(-12deg);
}
to {
-webkit-transform: rotate(112deg);
}
}
I noticed that the animation works flawlessly with FontAwesome 3.0.2. However, upon upgrading to 3.2.1, the animation stopped functioning properly – specifically on Chrome.
Any insights or solutions would be greatly appreciated!
Edit I also have additional HTML elements within the anchor tag that I prefer not to rotate along with the icon, so simply adding the 'rotator' class to the anchor won't suffice.
Edit For context, here's the complete HTML structure (the previous example was simplified):
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-bell-alt icon-animated-bell icon-only"></i>
<span class="badge badge-success">5</span>
</a>