CSS3动画库motion-css

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

使用方法

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

<link rel="stylesheet" href="css/motion.min.css">   
                

HTML结构

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

<div class="animation fade-in-left"></div>
                

动画延迟

如果你想为动画添加延迟效果，可以使用类似下面的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类。例如：

<div class="animation fade-in-left replay"></div>
                

和jQuery结合使用

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

<script type="text/javascript">
  $ (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");
  }
  });
  });
</script>
                

motion-css CSS3动画库的github地址为：https://github.com/pavlyukpetr/motion-css