Andrea Casaccia Andrea Casaccia - 1 year ago 60
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
animation doesn't work.

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


This is the

.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.

Answer Source sets the display property to inline when called on the i element. According to WC3 documentation inline elements cannot be animated:

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.

<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>