CSS3动画库motion-css-特效详细页-国内领先的前端外包切图网站-切客网(qkhtml.com)

在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

CSS3动画库motion-css

分类:其它 更新时间:2018-05-24 浏览次数:1957

代码简介

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

浏览器兼容

Chrome、 Opera、 Safari、Opera、IE10+

使用方法

1. 引入文件:

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


2. html:

    只需要添加animation相对应的class名:

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


3. 动画延迟:

"delay-05s"-0.5sec delay,
"delay-1s"-1sec delay,
"delay-1-5s"-1.5second delay,
"delay-2s"-2seconds delay,
"delay-3s"-3seconds delay


4.重复动画:

    只需要添加对应的replay类名:

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


5. 代码初始化:

    结合jquery来使用:

<script type="text/javascript">
  $ (window) .scroll (function() {
  $ ('#elementId'). each (function() {
  varelPosition = $ (this) .offset (). top; // Position of the element
  varelHeight = $ (this) .height ();    // Height of the element
  varwindowTop = $ (window) .scrollTop ();  // Top of the window
  varwindowHeight = $ (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>


问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!