Shrink and grow an element using CSS3

Question

I am trying to implement a grow and shrink effect on DIV element, this is working but the animation is working from left to right. Would like to make it from center.

Below I have placed the code, and here is the fiddle

    .elem {
        position:absolute;
        top : 50px;
        background-color:yellow;
        left:50px;
        height:30px;
        width:30px;
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation-name: grow;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -moz-animation-name: grow;
        -moz-animation-duration: 2s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
    }
    @-webkit-keyframes grow {
        from {
            height:30px;
            width:30px
        }
        to {
            height:130px;
            width:130px
        }
    }
    @-moz-keyframes grow {
        from {
    height:30px;
    width:30px
}
to {
    height:130px;
    width:130px
}
    }

How can I do this.

Answer 1

Use transform: scale(n) instead of changing the width/height

@keyframes grow {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(4.333);
    }
}

Demo

You shouldn't need the browser prefixed versions at this point in time.

Keep in mind that scaling an element like an image to 4.3x its full size will make it blurry, so it might be better to make the default (1 / 4.3)x to start, then scale it up to 1 in the animation.