可以前往官方网站
https://animate.style/#best-practices
接下来是如何在项目中引用
首先拥有一份animate.min.css文件 放入到public>static>css中
再将链接带入到_document.js中
<link rel="stylesheet" href={`${Url.cdnHost}/static/css/animate.min.css?v=${date}`} />
其中cdnHost代表在开发或测试环境下的前缀
let cdnHost = process.env.NODE_ENV === 'production' ? 'https://cdn7......' : '';
接下来就是精彩的环节
直接在你需要动画的类名下添加animation css样式
.twenty{
position: absolute;
top: 10vw;
left:10vw;
width: 22vw;
animation: bounceInLeft; //名称
animation-duration: 2s; //过程所用时间
}
名称可直接去官网粘贴复制,但要去掉前面的animate_前缀
这里复制后得到是animate__fadeInDownBig 所以名称我们只要后半段
就大功告成了
还有一种的方法是官网的示例,先安装下载,再引入
我的文件无法直接引用
我在其他博主那里截图的