当前位置:主页 > JavsScript库 > 动画 >

使用Animate.js库管理Animate.css支持的动画 - animate.js
栏目分类:动画   发布日期:2021-08-30   浏览次数:

animate.js 是一个很小的 JavaScript 库,它提供了一种方便的方法来将Animate.css支持的 CSS 动画应用于 DOM 元素,而无需编写任何 CSS。

使用:

1在页面中加载必要的animate.css和animate.min.js。

<link rel="stylesheet" href="/path/to/cdn/animate.min.css" />
<script src="/path/to/animate.min.js"></script>

2. 对目标元素应用 CSS 动画。有关完整动画列表,请参阅 Animate.css 官方网站。

<h1 id="example">Animate.js</h1>
animate.apply({
  selector: '#example',
  style: "animate__swing",
});

3. 设置动画延迟:1、2、3 或 4。

animate.apply({
  selector: '#example',
  style: "animate__swing",
  delay: 2,
});

4. 设置动画速度:‘slow’, ‘slower’, ‘fast’, or ‘faster’.

animate.apply({
  selector: '#example',
  style: "animate__swing",
  speed: 'slow',
});

5. 设置动画的迭代次数:1、2、3、4 或“infinite”。

animate.apply({
  selector: '#example',
  style: "animate__swing",
  repeat: 'infinite',
});


官方网站:https://github.com/rohit-chouhan/animate.js

相关热词: animate.jsAnimate.css动画

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库