animate.style是一个常用的动画组件库,非常适合强调、主页、滑块和引导注意力的提示

1,安装

使用 npm 安装:

$ npm install animate.css --save

导入到main文件夹中:

import 'animate.css';

其他的安装方法官网也有

​​​​​​动画.css |CSS 动画的跨浏览器库。 (animate.style)

2,用法

将类和动画名称直接添加到元素中

<h1 class="animate__animated animate__bounce">An animated element</h1>

3,自定义属性

还可以用自定义属性来控制动画的持续时间、延迟和迭代

除了动画效果,通常我们还有一些别的需求。比如动画循环执行、动画延时执行、动画执行时长。这些设置,Animate.css都给我们实现了。同样也只需配置几个类名,完全不用JS控制。

延迟执行:

  • 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

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐