css3 html5 动画库,CSS3动画库motion-css

motion-css是一款功能齐全的CSS3动画库。它使用简单，内置有12类91种不同的CSS动画效果。motion-css还可以和jQuery结合使用，制作动画序列效果。

使用方法

在页面中引入motion.min.css文件

HTML结构

使用motion-css插件，你需要做的事情非常简单，只需要添加animation和动画效果名称这两个class类即可。例如：

动画延迟

如果你想为动画添加延迟效果，可以使用类似下面的class类。

"delay-05s" - 0.5 sec delay,

"delay-1s" - 1 sec delay,

"delay-1-5s" - 1.5 second delay,

"delay-2s" - 2 seconds delay,

"delay-3s" - 3 seconds delay

你也可以设置自己的延迟类。

.delay-Xs

{

-webkit-animation-delay: Xs! important;

animation-delay: Xs! important;

}

重复动画

如果相要执行重复动画效果，只需要添加replayclass类。例如：

和jQuery结合使用

motion-css动画库可以和jQuery结合使用，来在前端页面控制不同的动画效果。例如下面的例子，当指定元素出现在屏幕的可是区域时，执行指定的CSS3动画。

$ (window) .scroll (function () {

$ ('#elementId'). each (function () {

var elPosition = $ (this) .offset (). top; // Position of the element

var elHeight = $ (this) .height (); // Height of the element

var windowTop = $ (window) .scrollTop (); // Top of the window

var windowHeight = $ (window) .height (); // Height of the window

if (elPosition < windowTop + windowHeight - elHeight) {

//当元素在屏幕的可视区域时添加 fade-in 动画

$ (This) .addClass ("animation fade-in");

}

if (elPosition > windowTop + windowHeight) {

// 当元素在屏幕的不可视区域时移除 fade-in 动画

$ (This) .removeClass ("animation fade-in");

}

if (elPosition + elHeight < windowTop) {

// 当元素在屏幕的不可视区域时移除 fade-in 动画

$ (This) .removeClass ("animation fade-in");

}

});

});