Question

I’m currently trying to create an animation that would make a div look as it if sinks backwards, then (after finished falling back) gets pushed to the left.

I’m using CSS3 right now, but I’m not super familiar with the animation property and am having some problems. Currently I’m using:

@-webkit-keyframes sinkBack
{
    50% {
        -webkit-transform: scale(.9);
        margin-left: 0;
    }
    100% {
        margin-left: -100px;
    }
}

The result of this though is that it scales down, then after 50%, starts scaling back up while getting pushed left. I want it though to stay at scale(.9) while being pushed left.

I’d also be willing to do this with jQuery, but animate doesn’t support transform, and I don’t want to use one of the plugins that enables those animations. So CSS3 felt like it would be a better option.

EDIT

Thanks to gion for his help. Final code below (switched out margin-left):

@-webkit-keyframes sinkBack /* Safari and Chrome */
{
50% {
    -webkit-transform: scale(.9);
}
100% {
    -webkit-transform: translateX(-100px) scale(.9);
}
}

Answer 1

keep the scale :

@-webkit-keyframes sinkBack
{
    50% {
        -webkit-transform: scale(.9);
        margin-left: 0;
   }
    100% {
       -webkit-transform: scale(.9);
        margin-left: -100px;
    }
}