带有CSS3类和JQuery的弹出式图像定位

我正在尝试创建一个堆栈图像，它在不同的位置上飞出（类似于）。一旦它位于某个区域上，它将通过以下方式设置其位置的动画：

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

我还可以通过以下方式设置动画：

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

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

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

有没有一种方法可以使CSS3类从文档的左上角动画化，从而使用JQUERY？我尝试过更改CSS和其他一些设置，但没有成功

这是我的Jquery fiddle链接：

---

如果你能告诉我一个更好的方法和解决方案在JS小提琴那将是伟大的感谢

参见参考图：您是否仍在寻找此问题的答案？如果是，请检查。