CSS3动画库motion-css特效插件

CSS3动画库motion-css特效插件

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

使用方法
在页面中引入motion.min.css文件

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

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

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

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

1
2
3
4
5
"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

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

1
2
3
4
5
.delay-Xs
{
    -webkit-animation-delay: Xs! important;
    animation-delay: Xs! important;
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>

文件信息:

    0

    发表评论