cssCSSLayout.css动画插件

var screenHeight = $(window).height();
$(".full-height").height(screenHeight);
$("#loading-screen").delay(500).fadeOut("slow");
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop };
$(window).on(&＃39;resize scroll load&＃39;, function() {
$(".animate").each(function(index, el) {
var test = $(this);
var answer = test.isInViewport();
if (answer === true){
var animation = test.data("animation");
if (animation == null) {
animation = "fadeInLeft";
}
test.addClass(animation).addClass(&＃39;animated&＃39;).removeClass(&＃39;animate&＃39;);
}
});
});

/* Template - Animations
============================================== */
@keyframes spinning_animation{0%{ transform:scale(1) rotate(0deg); -o-transform:scale(1) rotate(0deg)}
50%{ transform:scale(0.8) rotate(360deg); -o-transform:scale(0.8) rotate(360deg)}
100%{ transform:scale(1) rotate(720deg); -o-transform:scale(1) rotate(720deg)}
}
@-webkit-keyframes spinning_animation{0%{ -webkit-transform:scale(1) rotate(0deg)}
50%{ -webkit-transform:scale(0.8) rotate(360deg)}
100%{ -webkit-transform:scale(1) rotate(720deg)}
}
@keyframes bounce_in_animation{0%{ transform:scale(0,0); -o-transform:scale(0,0)}
20%{ transform:scale(1.4,1.4); -o-transform:scale(1.4,1.4)}
50%{ transform:scale(0.8,0.8); -o-transform:scale(0.8,0.8)}
85%{ transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1)}
100%{ transform:scale(1,1); -o-transform:scale(1,1)}
}
@-webkit-keyframes bounce_in_animation{0%{ -webkit-transform:scale(0,0)}
20%{ -webkit-transform:scale(1.4,1.4)}
50%{ -webkit-transform:scale(0.8,0.8)}
85%{ -webkit-transform:scale(1.1,1.1)}
100%{ -webkit-transform:scale(1,1)}
}
@keyframes grow_in_animation{0%{ transform:scale(0,0); -o-transform:scale(0,0)}
100%{ transform:scale(1,1); -o-transform:scale(1,1)}
}
@-webkit-keyframes grow_in_animation{0%{ -webkit-transform:scale(0,0)}
100%{ -webkit-transform:scale(1,1)}
}
@keyframes scrollDownHero {
from {
bottom:89px;
}
to{
bottom:55px;
}
}
/* ============================================= */