How to apply css3 animation from current translation? - css

Question

I have a box that's currently translated, but when I apply a shake animation to it, it jumps to the upper left side of the screen.
I'd like to shake it from it's current position. How might I do this?
Here's my jsfiddle. Please view in a webkit browser (chrome/safari)
http://jsfiddle.net/foreyez/atv7R/
CSS:
div {
background:red;
width:100px;
height:100px;
-webkit-transform: translate3d(50px, 50px, 0px);
}
#-webkit-keyframes shake {
0% { -webkit-transform: translateX(3px); }
50% { -webkit-transform: translateX(-3px); }
100% { -webkit-transform: translateX(0); }
}
.shake {
-webkit-animation-name: shake;
-webkit-animation-duration: 150ms;
-webkit-animation-iteration-count: 20;
-webkit-animation-timing-function: linear;
}
HTML:
<div></div>
JAVASCRIPT:
$('div').addClass('shake')

Answer 1

I ended up using move.js
http://visionmedia.github.io/move.js/
they do what I want with the .then() command. One of these days I'm gonna look at the code to see how they do it because it's all done with translates.

Answer 2

You could animate the position with jQuery and then add the add the class with the keyframe animation to get the desired effect.
http://jsfiddle.net/atv7R/3/
$('div').animate({
top: 50,
left: 50
}, 1000).addClass('shake');
or you could acomplish the same thing with css:
http://jsfiddle.net/atv7R/5/
div {
position:absolute;
top: 10px;
left:10px;
background:red;
width:100px;
height:100px;
}
#-webkit-keyframes shake {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
}
50% {
-webkit-transform: translate3d(3px, 3px, 0px);
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px);
}
}
.shake {
top: 50px;
left: 50px;
-webkit-transition: top 1s, left 1s;
-webkit-animation-name: shake;
-webkit-animation-delay: 1s;
-webkit-animation-duration: 150ms;
-webkit-animation-iteration-count: 20;
-webkit-animation-timing-function: linear;
}