CODEWITHSUNDEEP
cssfirefoxtransition
ditto
ditto

Reputation: 6317

Firefox refusing to transition element

Why does firefox refuse to transition the element? How may I fix?

.config:before
{
    content: 'test';
    font: 25px/55px serif;
    -webkit-transition: .6s -webkit-transform ease-in-out;
            transition: .6s transform ease-in-out;
}

.config.active:before
{
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
}

<span class="config active"></span>

JSBin: http://jsbin.com/zipokubode/1/edit?html,css,output

Note: I'm running the latest stable FF, so prefixing isn't the issue.

Upvotes: 0

Views: 48

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106058

You need to change the layout contest of the pseudo: http://jsbin.com/xutesahiqe/1/edit?html,css,output

Here display:inline-block; should be fine .

.config
{
    cursor: pointer;
      display:inline-block;
}

.config:before
{
    font: 25px/55px serif;
    display:inline-block;
    content: 'test';
    -webkit-transition: .6s -webkit-transform ease-in-out;
            transition: .6s transform ease-in-out;
}

.config.active:before
{
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
}

<span class="config"></span>

Upvotes: 1

Related Questions