动画到了可视区再执行

用的是animate.css和React_wow, React_wow依赖animate.css
https://cnpmjs.org/package/react-wow
https://daneden.github.io/animate.css/

$ npm install --save animate.css
$ npm install --save react-wow

使用：

import styles from './index.less';
import "animate.css";
import ReactWOW from 'react-wow'
...
...
render(){
    return (
            <ReactWOW animation='fadeIn'  duration='0.5s' delay='1s'>
                <div>123</div>
            </ReactWOW>
    )
}

如果除了使用animate.css里面的动画，还有其他动画需求，比如fadeIn进来后里面还有帧动画，怎么办呢？测试发现ReactWOW的动画只是作用于其子元素，子元素里面再嵌套一个div即可写自己的动画啦~

<ReactWOW animation='fadeIn'  duration='1s' delay='1s'>
        <div  style={{position: 'absolute', top: 0, right: 0, width: '48vw', height: '48vw'}} >
               <div  className={styles.animate2} />
         </div>
</ReactWOW>

.animate2 {
  background-size: 186vw 48vw ;
  background-image: url(''); 
  animation: ox2 0.5s steps(4, start) 0ms infinite normal backwards;
}
@keyframes ox2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -186vw 0;
  }
}