@Animate

说明
. 踩在巨人的肩膀上看世界。。。
. 更多信息,请访问 官网 - Animate.CSS
步骤
打开 cdnjs ,查找 animate,使用提供的在线资源
点击进入后,复制最小体积 min 这个版本的标签链接 copy link tag 到项目中在线使用;如果想本地使用,可以选择复制链接 copy URL 到浏览器地址栏中打开,再右键另存为本地CSS文件,最后引入到项目中
点击上方链接,进入官网,在右侧是动画类型和对应的子动画类型,单击预览动画效果
先为自己的元素添加主类 animate__animated,然后把鼠标移动到子动画类型上,单击子动画类型右侧的复制按钮,复制对应的类到元素中
使用 live server 打开浏览器查看效果
[] 向我靠拢
. 引入css,分别为4个元素指定主类和动画类
<div class="ani-item animate__animated animate__backInDown"></div>
为了避免动画动作过大,导致页面抖动/短暂出现滚动条,应该限制动画父元素为溢出隐藏 overflow:hidden;