写在前面：对于css3动画小白的我，自己动手写动画确实很艰难，但是无意间了解到有相关库可以实现，为什么不用呢，嘿嘿（当然也在学css3啦）
效果展示
官网效果：官网demo
实现效果：
官网文档
1）介绍：
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
即Animate.css 是一个随时可用的跨浏览器动画库，可在 Web 项目中使用。非常适合强调、主页、滑块和注意力引导提示。
2）动画效果：
在官网右侧（ 绿色框中的内容 ）是动画效果的选择，选择相应动画后中间的“Animate.css”会出现相应动画，在后面可以通过复制动画名在项目中实现相同动画的执行
1）介绍：
在向下滚动页面时显示 CSS 动画。默认情况下，可以使用它来触发动画.css动画。同时也可以轻松地将设置更改为喜欢的动画库。安装起来非常简单，但是需要与animate.css配合使用
2）效果：
官网demo
实现步骤
1、下载WOW.js 和 Animate.css
//animate.css
npm install animate.css --save
//wow.js
npm install wowjs
2、代码编写
说明：
为想要添加动画效果的元素添加一个类名（默认为wow，也可以自己定义），再添加相应动画的动画名（动画名到animate官网查看，上面有写到哦）
实例：
<img src="" class="wow fadeInUp" />
//最开始我是用className写的所以没有效果
WOW.js的使用：
var wow = new WOW(
{
boxClass: 'wow', // 动画元素的类名 (默认为 wow)
animateClass: 'animated', // animate.css的类名 (默认为 animated)
offset: 0, // 距离元素多少距离执行 (默认为 0)
mobile: true, // 是否在移动设备执行动画 (默认为 true)
live: true, // 是否异步加载内容 (默认为 true)
}
);
wow.init();
实现代码：
import React from 'react'
import {
Link } from "react-router-dom";
import {
Row, Col , Typography} from 'antd';
import '../../../../../../node_modules/wowjs/css/libs/animate.css'
// ↑ 这里需要找到相对路径 ， 直接import 'animate.css'没有效果
import {
WOW } from 'wowjs'
const {
Paragraph } = Typography;
export default function () {
var wow = new WOW(
{
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true,
}
);
wow.init();
return (
<div style={
{
maxWidth: 1160, margin: '0 auto' }} className='paragraph'>
<div>
<Row>
<Col xs={
24} md={
12} xl={
12}>
<div style={
{
margin: '0 auto', maxWidth: '400px' }}>
<Link to='/front/service'>
<img src="./pic/home1.jpg" class="wow fadeInUp" data-wow-delay="100ms" alt="" style={
{
maxWidth: '220px', marginLeft: '20%', marginTop: "15%" }} />
</Link>
<Paragraph class="wow fadeInUp" data-wow-offset="50" data-wow-delay="200ms" style={
{
fontSize: '15px', textAlign: 'center', maxWidth: '400px', margin: '0 auto', color: '#676B69' }}>
云集各类书画、摄影精品，亦租亦售，为您的商务、居家
<br />提供雅致的装饰，提升文化内涵。
</Paragraph>
</div>
</Col>
<Col xs={
24} md={
12} xl={
12}>
<div style={
{
margin: '0 auto', maxWidth: '400px' }}>
<Link to='/front/service'>
<img src="./pic/home2.jpg" class="wow fadeInUp" data-wow-delay="300ms" alt="" style={
{
maxWidth: '220px', marginLeft: '20%', marginTop: "15%" }} />
</Link>
<Paragraph class="wow fadeInUp" data-wow-offset="50" data-wow-delay="600ms" style={
{
fontSize: '15px', textAlign: 'center', maxWidth: '400px', margin: '0 auto', color: '#676B69' }}>
基于智能算法，为每⼀幅艺术品⽣成唯⼀认证码，保护
<br />每⼀位作者的版权，延伸每⼀幅作品的价值。
</Paragraph>
</div>
</Col>
</Row>
</div>
</div>
)
}
属性设置：
| 属性 | 说明 |
| data-wow-duration | 更改动画持续时间 |
| data-wow-delay | 动画延迟开始 |
| data-wow-offset | 启动动画的距离（与浏览器底部相关） |
| data-wow-iteration | 动画重复的次数 |
这里通过设置多个元素延迟执行的时间以达到视觉上起伏的效果
这样就实现了滚轮到相应位置出现动画执行的效果
文章有问题的地方欢迎大家评论指出！