animate。css 高级应用

animate.css 是一个非常受欢迎的 CSS 动画库，它提供了一个轻松使用的方式来为网站添加动画效果。除了标准的淡入淡出、旋转、缩放等动画效果外，animate.css 还提供了一些高级的用法。

这里给大家介绍一些 animate.css 的高级应用。

// 内嵌样式
.animate__heading {
animation-duration: 3s;
animation-name: slide-top;
animation-fill-mode: forwards;
animation-delay: 1s;
}
// JS 调用
$('.animate__heading').addClass('animate__animated animate__slideInLeft');

第一种方式是在 HTML 中使用内嵌样式，直接指定动画属性。其中 animation-duration 指定动画持续时间，animation-name 指定动画名称，可以是 animate.css 中自带的名称，也可以是自己定义的名称。animation-fill-mode 指定动画结束后元素的状态，forwards 表示保持动画结束时的状态。animation-delay 指定动画延迟执行的时间。

第二种方式是使用 JavaScript 调用 animate.css 中的动画效果。首先需要为元素添加 animate__animated 和 animate__xxx(动画名称) 两个类，然后通过 jQuery 等框架为元素添加 animate__xxxIn(入场动画) 或 animate__xxxOut(出场动画) 等类名即可。

// 链式动画
.animate__link {
animation-duration: 3s;
animation-name: slide-top, rotate-right;
animation-fill-mode: forwards;
}
// 自定义动画
.animate__custom {
animation-duration: 2s;
animation-name: custom;
animation-fill-mode: forwards;
}
// @keyframes 定义
@keyframes custom {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 0.5;
transform: translateX(50%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

第三种方式是通过链式动画实现多个动画效果的组合。animation-name 属性可以同时指定多个动画名称，然后在 animate.css 中找到对应的动画效果即可。这里展示了一个同时使用了 slide-top 和 rotate-right 两个动画的例子。

第四种方式是自定义动画效果。可以使用 @keyframes 定义自己的动画效果，然后通过 animation-name 属性指定对应的动画名称即可。例子中实现了一个从左向右滑动的动画效果。

查看更多关于animate。css 高级应用的详细内容...