animate.css cdn - CSS

简介

animate.css是一个基于CSS3的动画库，它包含了很多预设的动画效果，可以通过简单的添加类名来让元素产生动态效果。animate.css也可以用来作为你自己的CSS3动画库模板。

使用

animate.css有两种使用方式：

1. 直接下载animate.css并在你的页面载入：

<link rel="stylesheet" type="text/css" href="animate.css">

2. 使用CDN链接：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/animate.css/animate.min.css">

示例

你可以通过简单的在元素上添加类名来使用animate.css的动画效果：

<div class="animate__animated animate__bounce">Example</div>

这将在Example元素上应用一个弹跳的动画效果。animate__animated是必要的，代表这个元素将有一个动画效果，animate__bounce是要应用的具体动画效果。

动画效果

animate.css拥有众多的动画效果，可以在animate.css官网上查看效果并复制类名应用到你的元素上。

下面是一些常用的动画效果：

• animate__bounce
• animate__flash
• animate__pulse
• animate__rubberBand
• animate__shakeX
• animate__shakeY
• animate__swing
• animate__tada
• animate__wobble

自定义

你也可以自定义animate.css的动画效果，将它打包成你自己的动画库。

你可以通过访问animate.css官网的Custom Build页面来自定义你的动画效果，并从中打包出你自己的动画库。

结尾

animate.css是一个十分方便的CSS3动画库，它可以通过简单的添加类名来为你的网页添加生动有趣的动画效果，也可以作为打包的动画库模板来为你的项目提供便利。