用的是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;
}
}
