• animation


    https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js

    http://mynameismatthieu.com/WOW/dist/wow.min.js

    http://mynameismatthieu.com/WOW/css/libs/animate.css

    http://mynameismatthieu.com/WOW/

    <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
    <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

    new WOW().init();

    var wow = new WOW({
      boxClass:     'wow',      // animated element css class (default is wow)
      animateClass: 'animated', // animation css class (default is animated)
      offset:       0,          // distance to the element when triggering the animation (default is 0)
      mobile:       true,       // trigger animations on mobile devices (default is true)
      live:         true,       // act on asynchronously loaded content (default is true)
      callback:     function(box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      }
    });
    wow.init();

    .bounce {
    animation: bounce 2s 0s;
    }
    .zoom-out {
    animation: zoom-out 2s;
    }
    .infinite {
    animation-iteration-count: infinite;
    }
    .mode {
    animation-fill-mode: forwards;
    }
    .direction {
    animation-direction: alternate;
    }

    @keyframes zoom-out {
    0% {
    transform: scale3d(0,0,0);
    }
    100% {
    transform: scale3d(1,1,1)
    }
    }

  • 相关阅读:
    MySQL Server类型的MySQL 客户端的下载、安装和使用
    Sqoop学习笔记
    Sqoop安装部署
    Hive学习笔记
    HBase构架原理
    HBase HA分布式集群搭建
    IntelliJ IDEA(Community版本)本地模式的下载、安装及其使用
    Scala本地安装
    CALayer的隐式动画和显式动画
    简易动画两种执行方式
  • 原文地址:https://www.cnblogs.com/jayruan/p/6079737.html
Copyright © 2020-2023  润新知