设置动画元素

css：

.class
{
　　animation:mymove 5s infinite;
　　-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
@keyframes myfirst
{
　　from {background: red;}
　　to {background: yellow;}
}

　　

加载页面出元素的动画效果，原理：元素加class，animate_hidden，属性data-animate;里面是layui-animate + 想要显示的动画效果class，当屏幕滚动到适合的距离的时候自动为元素它加上class，出现动画效果。

最好animate_hidden先设置为透明度0

$(window).scroll(function(event) {
　　var winow_height = document.documentElement.offsetHeight || document.body.offsetHeight ;
　　oTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop: document.body.scrollTop;
　　$(".animate_hidden").each(function() {
　　　　var this_top = $(this).offset().top,
　　　　anim_class = $(this).data("animate");
　　　　if ((winow_height + oTop - this_top) >= 350) {//离屏幕顶部350px的时候显示动画
　　　　　　$(this).css('opacity', 1);
　　　　　　$(this).addClass(anim_class);
　　　　}

　　})
})