x-animate是通过屏幕滚动控制动画执行的插件，可以完美配合animate.css使用。

<p align="center">
<img width="300" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://github.com/codexu/_images/blob/master/x-animate/animate.gif?raw=true">
</p>

• 通过npm安装

  npm install animate.css x-animate --save

• 通过import引入x-animate，通过new操作符创建一个新的Animate对象。

  // javascript
  import 'animate.css'
  import Animate from 'x-animate'
  new Animate();

  <!-- html -->
  <div animate="bounceInLeft" delay="1000" duration="1000"></div>

  • animate(必填项) 参考animate.css动画名

  • delay(可选) 延时加载

  • duration(可选) 动画持续时间

如果您不希望使用animate.css，使用自定义的动画，那么您请按照以下的事例去写自定义动画。

<!-- css -->
@keyframes newAnimate {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

. newAnimate {
  animation-name: fadeIn;
}

<!-- html -->
<div animate="newAnimate" delay="1000" duration="1000"></div>