font-awesome animation not working with display: none;

Question

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/

Can you explain why you want a non-visible element to animate? — Scott, Aug 15 '16 at 15:55
It's a loader, it starts hidden and it has to be shown afterwards. — Andrea Casaccia, Aug 15 '16 at 15:56
Set `visibility: hidden` or `opacity: 0` instead of `display: none` if you want to animate element. — Morpheus, Aug 15 '16 at 16:00
I am asking the reason, not workarounds. I know how to work that around. — Andrea Casaccia, Aug 15 '16 at 16:01
Possible duplicate of [CSS transform doesn't work on inline elements](http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements) — Vucko, Aug 15 '16 at 16:04

score 6 · Accepted Answer · edited Aug 15 '16 at 17:34

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");

The second part of your answer is the correct answer. What about removing the first part and making it more readable? — Andrea Casaccia, Aug 15 '16 at 17:24

score 0 · Answer 2 · answered Aug 15 '16 at 16:06

0

You just want an explanation of the behavior?

From developer.mozilla.org:

In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

Compared to the visibility property:

The visibility property can be used to hide an element while leaving the space where it would have been. It can also hide rows or columns of a table.

answered Aug 15 '16 at 16:06

Daniel Lambert

346
3
6

This doesn't answer my question. Why isn't the element rotating once it's shown? – Andrea Casaccia Aug 15 '16 at 16:27
Ahhhh, I'm sorry. I did not understand your question. It looks like you already have an answer tho! – Daniel Lambert Aug 15 '16 at 18:56

score -1 · Answer 3 · answered Aug 15 '16 at 16:02

-1

Try this:

$(".fa-cog").css("display","inline-block");

answered Aug 15 '16 at 16:02

Vcasso

1,328
1
8
14

score -1 · Answer 4 · edited May 23 '17 at 12:00

-1

I found a similar question here;

CSS transition on an initially hidden elemement

It appears as though there are work-arounds; like to start with a z-index: -1 instead of display:none, or to start with the element transparent.

edited May 23 '17 at 12:00

Community

1
1

answered Aug 15 '16 at 16:55

Steve0

2,233
2
13
22

font-awesome animation not working with display: none;

4 Answers4