Question

I’m trying to do something where it is convenient to specify coordinates in EMs and transition font-size to show my content at different sizes (it’s a sort of block-based-graphics thing).

Here is a jsfiddle that illustrates the problem. It’s fine in Firefox, there’s no transition in IE (which is fine), but in Safari and Chrome it does a crazy jerky thing.

http://jsfiddle.net/6pf3D/2/

html:

<div class="parent">
    <div class="child">
    </div>
</div>​

css:

.parent{
    -webkit-transition: all;
    -webkit-transition-duration: 10s;
    background-color: rgba(0,255,0,0.3);
    font-size:16px;
    width:16em;
    height:16em;
}
.child{
    background-color: rgba(255,0,0,0.3);
    width: 8em;
    height:8em;
}

javascript:

$('.parent').css('font-size', '32px');

Does anybody know how I can get a smooth transition without sacrificing em-based coordinates?

Answer 1

Here I’ve made a new 1, try it out

Demo(2 sec Interval)

Demo 2(10 second interval)

CSS

.parent{
    background-color: rgba(0,255,0,0.3);
    font-size:16px;
    width:16em;
    height:16em;
    transition: width 10s, height 10s;
    -moz-transition: width 10s, height 10s;
    -webkit-transition: width 10s, height 10s;
    -o-transition: width 10s, height 10s;
}

.child{
    background-color: rgba(255,0,0,0.3);
    width: 8em;
    height:8em;
    transition: width 10s, height 10s;
    -moz-transition: width 10s, height 10s;
    -webkit-transition: width 10s, height 10s;
    -o-transition: width 10s, height 10s;
}