当前位置: 首页 > 工具软件 > Animate.css > 使用案例 >

Animate.css使用方法

谷梁俊楚
2023-12-01

Animate.css使用方法

1.Animate.css安装

1.1用npm安装Animate.css

使用npm安装

$ npm install animate.css --save

1.2导入Animate.css文件

import 'animate.css';

官网搬运代码见另一个博客Animate.css

1.3用cdn直接添加到网页(方便)

大部分情况下用这种,比较方便

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>

2.Animate.css的使用

Animate.css基本用法

​ 之前的animate.css用法,只需要在class里加上animated +动画名称就可以使用了,但现在animate.css已经更新了官方文档,现在的使用方法如下:

<style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
        	}
    </style>

<body>
    <div id="box" class="animate__animated animate__backInDown"></div>
  	//使用方法,在class里加上类animate__animated与任何动画名称一起添加到元素,此处为抖动效果
</body>  

从Animate.css版本4开始,可以自定义属性来定义动画的持续时间、延迟、迭代

.animate__animated.animate__bounce {
   --animate-duration: 5s;
}
/*添加类名属性样式,此设置可以改变动画的持续时间*/
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}
/*改变全局动画,--animate-delay是有多个模块时,模块出现之间的间隔时间*/
document.documentElement.style.setProperty('--animate-duration', '2s');
/*所有的动画需要两倍来实现*/
document.documentElement.style.setProperty('--animate-duration', '.5s');
/*所有动画需要一半时间来实现*/
 animate__delay-2s
/*在类名后面添加延迟,延迟多少秒后执行范围为1~5,超出无效*/
<div class="animate__animated animate__bounce animate__faster">Example</div>
/*通过添加以下类名来改变速度*/
/*类名			默认速度*/
animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms

/*这些类名的速度也可以在style中自定义更改*/
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
/*迭代次数*/

3.Animate.css的一些动画

弹跳

<div class="animate__animated animate__bounce">Animate.css</div>

闪光

<div class="animate__animated animate__flash">Animate.css</div>

脉冲

<div class="animate__animated animate__pulse">Animate.css</div>

弹性

<div class="animate__animated animate__rubberBand">Animate.css</div>

摇晃X

<div class="animate__animated animate__shakeX">Animate.css</div>

摇晃Y

<div class="animate__animated animate__shakeY">Animate.css</div>

摇头

<div class="animate__animated animate__headShake">Animate.css</div>

摇摆

<div class="animate__animated animate__swing">Animate.css</div>

抖动

<div class="animate__animated animate__tada">Animate.css</div>

摇晃2

<div class="animate__animated animate__wobble">Animate.css</div>

果冻

<div class="animate__animated animate__jello">Animate.css</div>

心跳

<div class="animate__animated animate__heartBeat">Animate.css</div>
 类似资料: