HTML5 使用CSS3动画代替jQuery的animate()以增加其执行效率

使用jQuery动画比较方便，其带来的缺点是执行效率比较低，在电脑上某些场景会卡顿，更别说在手机上了。

所以为了解决动画的流畅度问题，我使用了CSS3的动画属性。

$(".image_room3").css({
        "opacity":"1",
        "transform":"translateY(-267px)",
        "-ms-transform":"translateY(-267px)", /* IE 9 */
        "-webkit-transform":"translateY(-267px)", /* Safari and Chrome */
        "transition":animationType+" "+animationTime+"ms",
        "-ms-transition":animationType+" "+animationTime+"ms",
        "-webkit-transition":animationType+" "+animationTime+"ms",
      })

代码如上：

使用transform来定义动画的类型

使用translation来判断动画的执行时的条件

 

 

 

还有一种使用场景：

我先定义好，然后需要的时候再使用：

/*淡出效果*/
@keyframes fadein{
    0%{opacity: 0;
         }
    100%{
        opacity: 1;

    }
}
@-webkit-keyframes fadein{
        0%{opacity: 0;
         }
    100%{
        opacity: 1;

    }
}
@-moz-keyframes fadein{
        0%{opacity: 0;
         }
    100%{
        opacity: 1;

    }
}
@-o-keyframes fadein{
        0%{opacity: 0;
         }
    100%{
        opacity: 1;

    }
}
@-ms-keyframes fadein{
        0%{opacity: 0;
         }
    100%{
        opacity: 1;

    }
}

 

先定义好了。

然后在需要的时候进行使用：

setTimeout(function(){
      $(".image_cloud").css({
        "animation":"fadein 1s linear 1 forwards",
        "-webkit-animation":"fadein 1s linear 1 forwards",
        "-moz-animation":"fadein 1s linear 1 forwards",
        "-o-animation":"fadein 1s linear 1 forwards",
        "-ms-animation":"fadein 1s linear 1 forwards",
      })
    },600);

fadein就是其名称，使用的时候    指定好名称即可。