Javascript 使用css3转换而不是jQuery动画

我正在制作一个html块的动画，它淡入（不透明度）并从左侧（左边距）略微移动

---

有一个延迟，我需要在传输完成后在HTML块中执行一些函数。这可以在css中实现吗，可以通过添加一个具有转换的类来实现吗？

添加的css类：

.transitioned {
   opacity:1;
   margin-left:55px;
   transition:all 1s;
   -ms-transition:all 1s;
   -moz-transition:all 1s;
   -o-transition:all 1s;
   -webkit-transition:all 1s;
}

jQuery:（更新）

---

但我要问的是，你想这么做有什么特别的原因吗？我是说jQuery动画有什么问题？

我们重新调整JS，只添加类而不是任何样式：

setTimeout(function(){
    $('.latest-stats').toggleClass('transitioned').each(function () {
        // Call back functions here
    });
}, 1000);

我使用

setTimeout（）

，因为

delay（）

只适用于动画。我使用

each（）

然后CSS处理样式的更改，将所有视觉方面保持在一个位置：

。最新统计数据{
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
过渡：均为0.5s；
位置：绝对位置；
不透明度：0；
左边距：40px；
填充：30px；
背景：红色；
利润率：40像素；
}
.latest-stats.transitioned{
不透明度：1；
-webkit转换：翻译（55px，0）；
-moz变换：平移（55px，0）；
变换：平移（55px，0）；
}

注意我使用的是
translate
将元素移位，而不是
margin向左移动。但是，请检查浏览器支持，并在必要/适当时提供回退

没有什么特别的错误，动画没有我希望的那么平滑，我想看看css转换是否会更平滑。分离关注点是这样做的一个很好的理由，前提是不支持css转换的浏览器存在回退。我还建议使用
translate
而不是设置左边距的动画，因为它通常更平滑。请注意，
translate
并不像您希望的那样得到广泛支持，但是覆盖范围非常好。如果您的页面中有大量动画，并且希望平滑过渡，那么请查看GSAP=>刚刚尝试过，并且在添加类后，上面的代码似乎不会触发任何代码，例如，如果我试图向屏幕提示某些内容？我不认为addClass上有回调？检查更新的jQuery代码，我忘了提到前面的代码需要jQuery UI库，因为默认情况下，
addClass
没有回调
setTimeout(function(){
    $('.latest-stats').addClass('transitioned');
    setTimeout(function(){
        //your code here
    },1000);
},1000);

setTimeout(function(){
    $('.latest-stats').toggleClass('transitioned').each(function () {
        // Call back functions here
    });
}, 1000);