Why does my transform animation override my original transform?

Question

I have three elements, Each of them with its own transform, and I want to animate their translate transform not affecting scale:

.one{
    -webkit-transform: scale(0.5);
}
.two{
    -webkit-transform: scale(0.8);
}
.three{
    -webkit-transform: scale(0.2);
}

@-webkit-keyframes bounce{
    from{
        -webkit-transform: translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: translate3d(100px, 100px, 0);
    }
}

<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>

But this transform overrides scale. I could use different keyframes for each element. Or wrap each element and style its parent with scale transform and use one only keyframes to animate it. But this all is kind of tricky. Is there a better solution?

http://jsfiddle.net/422t2/

Answer 1

try to add animation to each element and animation to the container:

DEMO

HTML

<div class="container">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
</div>

CSS

@-webkit-keyframes bounce{
    from{
        -webkit-transform: translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: translate3d(100px, 100px, 0);
    }
}

@-webkit-keyframes scale1{
    from{
        -webkit-transform: scale(1);
    }
    to{
        -webkit-transform: scale(0.5);
    }
}
@-webkit-keyframes scale2{
    from{
        -webkit-transform: scale(1);
    }
    to{
        -webkit-transform: scale(0.8);
    }
}
@-webkit-keyframes scale3{
    from{
        -webkit-transform: scale(1);
    }
    to{
        -webkit-transform: scale(0.2);
    }
}