Animate.css -岩石教程

特点

丰富的动画效果：包括进入、退出、强调和特殊效果。
易于使用：只需在 HTML 元素上添加相应的类名即可应用动画。
响应式设计：所有动画效果均支持响应式设计，适用于不同屏幕尺寸。
轻量级：文件体积小，不会显著增加页面加载时间。
跨浏览器兼容：在现代浏览器中均能良好运行。
可定制性强：可以根据需要调整动画的持续时间、延迟和次数。

使用场景

页面加载动画：在页面加载时使用动画，提升用户体验。
按钮和链接：为按钮和链接添加点击、悬停等交互动画。
通知和提示：在显示通知和提示时使用动画，吸引用户注意。
内容切换：在内容切换时使用动画，使过渡更加平滑和自然。
表单验证：在表单验证失败时使用动画提示用户。

安装方式

通过 CDN 引入

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

npm 安装

npm install animate.css --save

使用示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animate.css Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
  <h1 class="animate__animated animate__bounce">Hello, world!</h1>
</body>
</html>

在这个示例中，我们为标题添加了 bounce 动画效果，当页面加载时，标题会呈现出跳动的效果。

常用 API 介绍

Animate.css 的使用主要通过添加预定义的类名来实现。以下是一些常用的动画类名：

进入动画：
- animate__fadeIn：淡入效果。
- animate__zoomIn：放大进入效果。
- animate__slideInUp：从下方滑入。
退出动画：
- animate__fadeOut：淡出效果。
- animate__zoomOut：缩小退出效果。
- animate__slideOutDown：向下滑出。
强调动画：
- animate__bounce：跳动效果。
- animate__flash：闪烁效果。
- animate__rubberBand：橡皮筋效果。
特殊效果：
- animate__hinge：铰链效果。
- animate__jackInTheBox：从盒子中弹出。
- animate__rollIn：滚动进入。

自定义动画属性

可以通过 CSS 自定义动画的持续时间、延迟和其他属性。例如：

.animate__custom {
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

在 HTML 中使用自定义类：

<div class="animate__animated animate__bounce animate__custom">Custom Animation</div>

Animate.css

特点

使用场景

安装方式

通过 CDN 引入

npm 安装

使用示例

常用 API 介绍

自定义动画属性

官方资料