Firefox 拒绝过渡元素

【问题标题】：Firefox refusing to transition elementFirefox 拒绝过渡元素
【发布时间】：2015-06-24 08:03:36
【问题描述】：

为什么 Firefox 拒绝转换元素？我该如何解决？

.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

注意：我运行的是最新的稳定 FF，所以前缀不是问题。

【问题讨论】：

标签： css firefox transition

【解决方案1】：

您需要更改伪的布局竞赛：http://jsbin.com/xutesahiqe/1/edit?html,css,output

这里display:inline-block;应该没问题。

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

【讨论】：