标签:__ 动画 2s delay animate 使用指南 css
前言
- 最近我需要将animate.css整合进dooring中做成动画,毕竟这玩意自己写太累,而且写的效果可能也不是很自然。
安装
- 官网:https://animate.style/
- npm 或者yarn 安装即可。https://www.npmjs.com/package/animate.css
使用
- 引入animate.css 使用link或者直接引入都可以。
- 然后加类名即可。
import 'animate.css';
<div
style={{ width: 300 }}
className="animate__animated animate__bounce animate__delay-2s"
>
2312312
</div>
- 这样就有弹跳效果。
类名归类
animate__animated
- 首先,必须加上.animate__animated类,
- 看了下这个类写的都是设定的全局变量什么的。所以一开始得加上。
animate__动画名
- 第二,加上动画名。
- 这个动画名太多了,在上面官网查找。
首次延迟
- 在延迟多少后开始动画,默认有以下几种。
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
animate__delay-5s 5s
动画速度
- 动画运行速度,实际上就是拿默认的动画速度计算下。
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms
重复次数
- 有以下几种,最常用的当然是无限了。
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite
开始位置与结束位置
- fill-mode :https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
- 默认都为both,有需要自己改。
- forwards与both区别就是both会应用第一帧状态,而forwards不会。
标签:__,动画,2s,delay,animate,使用指南,css 来源: https://blog.csdn.net/yehuozhili/article/details/116426299
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。