animate.css

I'm using animate.css with waypoints.js in my landing page. I want to animate elements when user scrolls the page. But, the problem is that I need to hide elements before the animation starts(if i don't hide, animate.css hides element first and then animates in, that looks pretty ugly). However, I solved problem by adding two classes in my css but it creates another problem. .visible{ opacity: 1; } .invisible {opacity: 0; } // I added following jquery code $('elem').removeClass('invisible').addClass('visible fadeInUp'); This works good until I add animation-delay to an elements. Here is an

If i click .img-1 or .img-2 first time it works. bt not in second time without page refresh. I am using Animate.css (zoomIn). Here is the code sample -- html: <a class="thumbnail img-1"></a> <a class="thumbnail img-2"></a> <p class='back-end'> <p class='front-end'></p> <h1 class='dismiss pull-right'>×</h1> jquery: $('.img-1,.img-2').click(function(){ $('.back-end,.front-end,.dismiss').addClass('animated zoomIn').show(); }) $('.dismiss').click(function(){ $('.back-end,.front-end,.dismiss').addClass('animated zoomOut'); }) See it in jsfiddle http://jsfiddle.net/oxu69Luw/ Script would be like

本文转载于: 猿2048 网站 CSS3动画简介以及动画库animate.css的使用 　　从广义上来讲，css3动画可以分为两种。 　　过渡动画 　　第一种叫过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。css过渡只能定义首和尾两个状态，所以是最简单的一种动画。要想使一个元素产生过渡动画，首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有 　　transition-property：规定对哪个属性进行过渡 　　transition-duration：定义过渡的时间，默认是0 　　transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等，默认是 ease 　　transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0 　　 　　为了书写方便，也可以把这四个属性按照以上顺序简写在一个 transition 属性上： 　　 　　如果是使属性的默认值，则可以省略： 　　 相当于： 　　如果想要同时过渡多个属性，可以用逗号隔开，如： 　　 　　 　　使用transtion属性只是规定了要如何去过渡，要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢