使用CSS3类和JQuery的弹出图像位置

Question

我正在尝试创建一个在不同位置飞出（SIMILAR TO http://goo.gl/OJlfmG）的堆栈图像。一旦它出现在某个区域，它就会通过以下方式激活其位置：

$parent.find('img#photo2').animate({left: "200px", top: "200px"});

我也可以通过以下方式获取动画：

@-webkit-keyframes pop2{
    0% {
    }
    100% {
        -webkit-transform: translate(200px, 200px);
    }
}

我想使用这个CSS动画效果的Class版本，这样我就可以完美地使用addClass和RemoveClass jQuery属性。

$parent.find('img#photo2').addClass('pop2');

有没有办法从文档的左上角创建CSS3类动画，以使用JQUERY？我已经尝试过改变CSS和其他一些设置而没有运气。

这是我的Jquery小提琴链接：http://jsfiddle.net/5DFJq/1/

如果你能告诉我一个更好的方法和JS Fiddle的解决方案，那将非常感谢！