https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js
http://mynameismatthieu.com/WOW/dist/wow.min.js
http://mynameismatthieu.com/WOW/css/libs/animate.css
http://mynameismatthieu.com/WOW/
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section> <section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>
new WOW().init();
var wow = new WOW({ boxClass: 'wow', // animated element css class (default is wow) animateClass: 'animated', // animation css class (default is animated) offset: 0, // distance to the element when triggering the animation (default is 0) mobile: true, // trigger animations on mobile devices (default is true) live: true, // act on asynchronously loaded content (default is true) callback: function(box) { // the callback is fired every time an animation is started // the argument that is passed in is the DOM node being animated } }); wow.init();
.bounce {
animation: bounce 2s 0s;
}
.zoom-out {
animation: zoom-out 2s;
}
.infinite {
animation-iteration-count: infinite;
}
.mode {
animation-fill-mode: forwards;
}
.direction {
animation-direction: alternate;
}
@keyframes zoom-out {
0% {
transform: scale3d(0,0,0);
}
100% {
transform: scale3d(1,1,1)
}
}