How to apply CSS3 transforms with keyframe animations ?

Question

How to apply more than one transform with CSS3 animation ?

Here is my HTML code :

<div class="container">
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
</div>

And my attempt :

@-webkit-keyframes firstanim{
    from{
        -webkit-transform:scale(1);
        -webkit-transform:rotate(0deg);
    backgroud:skyblue;
    left:0px;

    -webkit-transform: rotateY(0deg);
   }    to{
    -webkit-transform:rotate(360deg);
    -webkit-transform:scale(1.5);
    background:orange;
    left:100px;
    -webkit-transform: rotateY(360deg);
   }
}


.container{
    border:1px solid black;
    padding:20px;
    width:250px;
    height:50px;
    position:realtive;
}
.cell{
    width:25px;
    height:25px;

    background:skyblue;

    float:left;
    display:inline-block;
    margin:0px 5px;
    position:relative;
    -webkit-animation: firstanim 3s infinite;

}
.inner{
 width:100%;
 height:50%;
 float:left;

    border:1px solid white;
    border-left-width:0px;
    borer-right-width:0px;
}

The result is located here.

Only one transform is being applied to the elements, even if I add more.

Answer 1

If you write something like this:

transform: rotate(30deg);
transform: scale(3);

then the second one overrides the first one and your element is only scaled, not rotated.

In order to apply multiple transforms to a single element you need to chain them.

Example:

transform: rotate(30deg) scale(3) translateX(3em) skewY(60deg);

Also, the order in which you apply them matters and you may get different results depending on the chosen order - see this example, where the blue box doesn't have the same shape as the red one after applying the same two transforms, but in inverse order.

Your fiddle with chained transforms: http://jsfiddle.net/TBrf2/4/

Answer 2

Here is fiddle demo working with multiple transforms.

-webkit-transform:scale(1)  rotateY(0deg);

you need to apply like this.