Animation

Hello, problem is in transform: rotate(360deg); I using tailwind.css and if I use animate-spin class to span icon, style transform for svg, does not allow adding animation.

P.S.

.animate-spin{
animation: spin 1s linear infinite;
}

@keyframes spin {
from {
transform: rotate(0deg);
}   to {
transform: rotate(360deg);
} 

[cyberalien]

It is caused by bug in Tailwind. This is their spin animation code:

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

There is no “from”, so it transforms from initial state. SVG rendered by Iconify have style set to transform: rotate(360deg) to fix SVG rendering bug in Firefox. Because initial state matches final state, no animation happens.

You can test that by using this:

<p class="animate-spin w-7" style="transform: rotate(0deg);">example 1</p>
<p class="animate-spin w-7" style="transform: rotate(360deg);">example 2</p>

First example will spin, second example will not, even though their style has identical layout.

Workaround is to set transformation on icon:

<span class="iconify animate-spin" data-icon="uil:spin" style="transform: none;"></span>

[cyberalien]

Firefox bug has been fixed for a while, so it is a legacy support. In the latest version of SVG framework I’ve removed that code because latest version of browser + few previous versions do not have that bug anymore, so it is safe to remove workaround.

Update to SVG framework 2.0.0-rc.5

Bugzilla issue: https://bugzilla.mozilla.org/show_bug.cgi?id=608812