css3 的过渡动画，有些时候会产生一些其他问题。
比如：你想先改一个css属性，之后再进行动画过渡，结果实际上你会发现，css属性和动画是同步进行的。这个应该是在编译阶段就确定好了。
所以只能通过settimeout 来进行异步处理。
<!DOCTYPE html>
<!--HTML5 doctype-->
<html> <head>
<style type="text/css">
.stage {
width: 300px;
height: 300px;
float: left;
margin: 15px;
position: relative;
background: url(https://img.zhankr.net/tsiqflpuvx291058.jpg) repeat center center; -webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
.container {
position: absolute;
top: 50%;
left: 50%; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container img {
position: absolute;}
.container img:nth-child(1){
z-index: 1;
opacity: .6;
}
.s1 img:nth-child(2){
z-index: 2;
-webkit-transform: translate3d(30px,30px,200px);
-moz-transform: translate3d(30px,30px,200px);
-ms-transform: translate3d(30px,30px,200px);
-o-transform: translate3d(30px,30px,200px);
transform: translate3d(30px,30px,-200px);}.s2 img:nth-child(2){
z-index: 2;
-webkit-transform: translate3d(30px,30px,-200px);
-moz-transform: translate3d(30px,30px,-200px);
-ms-transform: translate3d(30px,30px,-200px);
-o-transform: translate3d(30px,30px,-200px);
transform: translate3d(30px,30px,-200px);
}
</style>
<script src="jquery.min.js"></script>
<script>function c(){ $("#aaaa").css("left", "-10px");
}function a(){ $("#aaaa")[0].style["transform"] = "translate3d(-100%,0,0) scale(1)";
//for(var s = +new Date(); s + 200 > +new Date();){}
$("#aaaa")[0].style["transition"] = "all 0.23s ease-out";
// for(var s = +new Date(); s + 200 > +new Date();){}
//for(var s = +new Date(); s + 30000 > +new Date();){}
//$("#aaaa")[0].style["WebkitTransform"] = "translate3d(-0%,0%,0) scale(1)";
console.log(111111)
}function b(){ $("#aaaa")[0].style["WebkitTransform"] = "translate3d(-0%,0%,0) scale(1)";
}
</script>
</head>
<body>
<div class="stage s1">
<div class="container">
<img src="https://img.zhankr.net/53ra1bmqnmf91059.png" alt="" width="70" height="100" id="aaaa" />
<img src="https://img.zhankr.net/53ra1bmqnmf91059.png" alt="" width="70" height="100" />
</div>
</div>
<div class="stage s2">
<div class="container">
<img src="https://img.zhankr.net/53ra1bmqnmf91059.png" alt="" width="70" height="100" />
<img src="https://img.zhankr.net/53ra1bmqnmf91059.png" alt="" width="70" height="100" />
</div>
</div>
</body>
</html>
$(“#aaaa”)[0].style[“transform”] =”translate3d(-100%,0,0) scale(1)”;
$(“#aaaa”)[0].style[“transition”] = “all 0.23s ease-out”;
