Andrea Casaccia Andrea Casaccia - 3 months ago 21
CSS Question

font-awesome animation not working with display: none;

If I hide an element with

display: none;
, and then show it at a later time with
$(".fa-spin").show()
the
fa-spin
animation doesn't work.

Note that everything works properly if the element is not hidden in the beginning but is hidden later with:

$(".fa-spin").hide()


This is the
.fa-spin
implementation:

.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}

@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}


Can you explain this behavior?

I am asking the reason of this behavior, not workarounds.

https://jsfiddle.net/md0ej7pt/

Answer

jQuery.show() sets the display property to inline when called on the i element. According to WC3 documentation inline elements cannot be animated:

https://drafts.csswg.org/css-transforms-1/

Transformable element

A transformable element is an element in one of these categories: an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

To correct this, use Vallius's suggestion of setting display: inline-block instead of using show(), or wrap the element and hide the parent instead.

https://jsfiddle.net/359zLsdf/2/

<span class="coggy" style="display:none" ><i class="fa fa-cog fa-spin"  aria-hidden="true"></i></span>

<i class="fa fa-cog fa-spin myCog " style="display:none"  aria-hidden="true"></i>

$(".coggy").show();

$(".myCog").css("display","inline-block");
Comments