前语

当你想要招引证户的注意力，动画是一个强壮的东西。Animate.css是一个功用丰富的库，用于在网页上快速轻松地增加动画。无需深化JavaScript或杂乱的CSS，你能够给元素增加预设的动画作用。本文将辅导你怎么运用Animate.css为你的网站增添生机。

运用教程

第一步：引进Animate.css

要开端运用Animate.css，首先要将它包含在你的项目中。有几种办法能够做到这一点：

经过CDN引进：

在你的HTML文档的<head>部分增加以下链接：

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

经过NPM装置：

假如你的项目运用了Node.js，你能够经过npm装置Animate.css：

npm install animate.css

然后，在你的CSS文件中导入Animate.css：

@import 'animate.css';

或许在你的JavaScript文件中：

import 'animate.css';

第二步：选择动画

Animate.css具有多种动画作用，从弹跳、闪耀、翻转到淡入淡出等。你能够在Animate.css官网上阅读所有可用的动画。

比如：假如你想要让一个元素弹跳，只需增加animate__animated和animate__bounce两个类：

<div class="animate__animated animate__bounce">Look at me bounce!</div>

第三步：自界说动画

默许情况下，动画只播映一次，继续1秒。假如你想要更改这些设置，能够直接在你的CSS文件中增加一些规矩：

.animate__animated {
  --animate-duration: 2s; /* 继续时间改为2秒 */
}
.myElement {
  --animate-delay: 1s; /* 推迟1秒开端动画 */
}
.myElement {
  --animate-repeat: infinite; /* 设置无限次重复动画 */
}

在HTML中，只需要给元素增加class .myElement。

1<div class="animate__animated animate__bounce myElement">I'm an animated div</div>

第四步：处理动画结束事情

假如你需要在动画播映完成后执行一些操作，能够运用JavaScript监听animationend事情：

const animatedElement = document.querySelector('.myElement');
animatedElement.addEventListener('animationend', () => {
  console.log('动画播映结束！');
  // 这里能够增加更多动作，比如隐藏元素等
});

实用技巧

  • 审慎运用动画。过多的动画可能会涣散用户的注意力，或许使界面显得凌乱。
  • 测试在不同的设备和阅读器上动画的体现。
  • 考虑动画的可拜访性，保证动画不会对用户造成困扰，尤其是那些对动画灵敏的用户。

Animate.css是一个快速、简略、可自界说的方式来增强用户界面和提高用户体会。运用这个强壮的东西，你能够在你的网页上发挥构思，只需数行代码即可完成。敞开你的动画之旅吧！

原理

Animate.css库的原理基于CSS的要害帧（keyframes）和动画（animations）特点。这些是CSS3中引进的功用，允许开发者在网页上创立杂乱的动画作用，而不需要运用JavaScript或任何其他脚本语言。

要害帧（Keyframes）

CSS要害帧经过@keyframes规矩来界说动画过程中的一系列款式改变。一个@keyframes规矩包含了动画序列中的多个要害点，它们是这个序列中的特定时间，每个要害点描绘了一个或多个CSS特点的款式。

示例：

@keyframes example {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

上面的动画作用名为example，它扩大元素的初始大小到1.5倍。

动画（Animations）

当你界说了要害帧后，你能够运用animation特点将它使用于一个元素。animation特点是一个简写特点，它能承受多个值，包括动画称号、继续时间、推迟、次数和填充模式等。

.element {
  animation: example 2s infinite;
}

上面的代码将会使.element类的元素使用名为example的动画，继续时间为2秒，并且会无限循环播映。

动画的CSS特点

Animate.css使用了多个CSS特点来界说动画作用，最常用的有：

  • animation-name：引证@keyframes中界说的动画称号。
  • animation-duration：设置动画继续时间。
  • animation-timing-function：界说动画的节奏，例如linear,ease,ease-in,ease-out等。
  • animation-delay：设置动画开端之前的推迟。
  • animation-iteration-count：设置动画的播映次数，infinite表明无限次。
  • animation-direction：设置动画是否反向播映。
  • animation-fill-mode：动画在执行之前和之后怎么将款式使用于其方针。

这些特点允许Animate.css库为元素创立一系列动画作用，从更简略的一次性变换到更杂乱的继续动画。

Animate.css的完成

Animate.css库经过预界说了一套丰富的@keyframes和默许动画款式类，能够快速的经过增加类名给元素增加动画作用。

当你给一个元素增加animate__animated和animate__bounce类名时，实际上你是在告知阅读器，将这个元素与Animate.css所界说的bounce要害帧相关起来，并使用预设的动画特点。

这种办法的好处是去除了手动编写杂乱CSS动画代码的需求，提供了一种可复用和易于施行的动画解决方案。使用Animate.css，开发者能够轻松地给网站增加专业质量的动画作用，提高用户界面的生机和招引力。

假如喜欢我的文章或许想上岸大厂，能够重视公众号「量子前端」，将不定时重视推送前端好文、分享就业材料秘籍，也期望有机会一对一帮助你完成愿望。