Animate.css - Html介绍

简介

Animate.css是一个CSS动画库，可以快速而简单地为HTML元素添加动画效果。它非常适合用于Web应用程序或移动应用程序的UI设计，为用户提供更加丰富、生动、愉悦的交互体验。

特点

Animate.css具有如下特点：

• 支持一系列预定义的CSS动画效果，调用简单。
• 支持自定义动画效果。
• 无需JavaScript，仅使用CSS即可实现动画效果。
• 兼容主流浏览器。

安装

Animate.css可以通过多种方式进行安装，如：

• 下载地址：https://github.com/animate-css/animate.css/releases
• 使用CDN：

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

• 安装包管理工具（如npm、yarn等）：

npm install animate.css

使用

基本使用

使用Animate.css添加动画效果十分简单，只需在HTML标签中添加相应的class即可。例如，在按钮上应用bounce动画：

<button class="animate__animated animate__bounce">Click me</button>

说明：

• animate__animated：指定元素要应用动画效果。
• animate__bounce：指定应用的动画效果名称，本例为bounce。

自定义动画

Animate.css支持自定义动画效果。具体步骤如下：

1. 在Animate.css源代码中的source/_animations/目录下，创建并命名你的动画文件，一般以_youranimation.scss的形式命名。
2. 在该文件中，采用Sass编写你的动画效果。例如，在_youranimation.scss文件中编写一个heartbeat动画：

.youranimation {
  animation-name: heartbeat;
}

@keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }

  10% {
    transform: scale(0.9);
    animation-timing-function: ease-in;
  }

  17% {
    transform: scale(1.1);
    animation-timing-function: ease-out;
  }

  33% {
    transform: scale(0.95);
    animation-timing-function: ease-in;
  }

  45% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

3. 在Animate.css源代码中的source/animate.css文件中，导入你的动画文件。例如，在该文件中导入heartbeat动画：

@import '_youranimation.scss';

4. 此时就可以在HTML标签中应用你自定义的动画效果了，例如在按钮上应用heartbeat动画：

<button class="animate__animated youranimation">Click me</button>

可用的动画效果

Animate.css提供了丰富的动画效果，例如：

• bounce
• flash
• pulse
• rubberBand
• shake
• swing
• tada
• wobble
• ... 可以在Animate.css官网中查看更多的动画效果。

示例

以下是一个使用Animate.css实现的简单动画效果示例：https://codepen.io/anon/pen/ZEQaGRL。

总结

Animate.css是一个实用的CSS动画库，可以帮助我们快速添加动画效果，提高Web应用程序或移动应用程序的用户交互体验。它具有丰富的预定义的动画效果，同时也支持自定义动画效果。无需JavaScript，仅使用CSS即可实现动画效果。