CSS字母间距转换在Firefox v26中不起作用

Question

This transition works in Chrome and IE11 but not in Firefox v26 Win7.

MDN specification says it's still in a working draft.

CSS-TRICKS says it's animatable without any note about not working in Firefox.

This js fiddle demonstrates the behavior.

Any ideas?

.trans {   
    -moz-transition: all 1s;
    transition: all 1s    
}

.spaced {    
    letter-spacing: 10px    
}

$("#btn").on('click', function() {
    $("h1").toggleClass("spaced");
});

<h1 class="trans">Animate my letter spacing</h1>
<input type="button" value="animate" id="btn">   

Answer 1

Interpolation between normal (the default value) and a length is not defined in the spec. You want to transition from 0 to 10px , not normal to 10px .

Answer 2

Try this instead of using css you can just .animate

http://jsfiddle.net/cornelas/8jAZy/9/

$("#btn").on('click', function() {

   $("h1").animate({ "letter-spacing" : "10px"});

});

This is one method there may be another that works.