写在前面：对于css3动画小白的我，自己动手写动画确实很艰难，但是无意间了解到有相关库可以实现，为什么不用呢，嘿嘿（当然也在学css3啦）
文章目录
效果展示官网文档实现步骤1、下载WOW.js 和 Animate.css2、代码编写效果展示
官网效果：官网demo
实现效果：
官网文档
Animate.css官网
GitHub-animate-css
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”会出现相应动画，在后面可以通过复制动画名在项目中实现相同动画的执行
WOW.js官网
GitHub-wow-js
1）介绍：
在向下滚动页面时显示 CSS 动画。默认情况下，可以使用它来触发动画.css动画。同时也可以轻松地将设置更改为喜欢的动画库。安装起来非常简单，但是需要与animate.css配合使用
2）效果：
官网demo
实现步骤
1、下载WOW.js 和 Animate.css
npm-wowjs
npm-animate.css
//animate.cssnpm install animate.css --save//wow.jsnpm 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>)}
属性设置：
这里通过设置多个元素延迟执行的时间以达到视觉上起伏的效果
这样就实现了滚轮到相应位置出现动画执行的效果
文章有问题的地方欢迎大家评论指出！
