CSS动画手机优化

之前做了一个H5的问答小游戏，打错的时候全屏弹出一个错误的图片。刚开始直接用JQUERY的fadein，fadeout，手机上卡得不能看。网上搜了一轮，按照大神的方法进行了优化，动画流畅度噌噌噌的上去了：

优化前

<imgid="wrong"src="img/wrong.png"style="position: absolute; width: 100%; height: 100%; top:0%; left: 0%;display: none;>
<script>
     $("#wrong").fadeIn(500,'easeOutBounce').delay(500).fadeOut(500, nextq);
</script>

触发事件时，使用fadeIn/fadeOut显示隐藏层，在手机浏览器上会卡顿
优化后

<imgid="wrong"src="img/wrong.png"style="position: absolute; width:100%; height:100%; top:0%; left:100%;opacity:0; transition: opacity 0.5s;">
<script>
  $("#wrong").css("opacity","1");
  $("#wrong").css("left","0px");
  setTimeout(function(){
    $("#wrong").css("opacity","0");
  },1000);
  setTimeout(function(){
  $("#wrong").css("left","100%");
    nextq();
  },1500);
</script>

隐藏显示使用CSS的transition的动画，并且元素不再是隐藏的，而是位置在屏幕外，浏览器不用重新生成框架。在手机上动画流畅

参考：
https://www.qianduan.net/high-performance-css3-animations/