实用的纯JS和CSS3页面滚动动画库插件 A CSS3 scroll animation library

Easy to use

Scrollanim has many builtin CSS3 animations to use. All you need to do is to add data-kui-anim attribute to your elements.

 
			            <div data-kui-anim="fadeIn">
			  Show this with a fadeIn animation.
			</div>
			        

Cool, isn't it?

Advanced mode

Also, this is possible to add the animations using the JavaScript API.

 
			            kissuiScrollAnim.add(element, {
			  'in': 'fadeIn',
			  'out': 'fadeOut'
			});
			        

Scrolanim supports all available positions for an element on the page. Also, you can use a compound event name (e.g. in center middle)

CSS3 Animations

Scrolanim has many CSS3 animations to use. No JavaScript animations, better performance.

Works on desktop and portable devices perfectly.

Infinite animation

Also, animations names accept an optional parameter infinite to repeat the animation forever.

Perfect event control

Scrollanim controls all elements with an extra care. You can attach events to almost all possible positions of an element on the page.

For instance, this element appears with a fadeIn animation but also gets a pulse animations when it's in the middle of the page.