css animate.css与keyframes结合制作动画

可通过自定义@keyframes与Animate.css类结合实现灵活动画：1. 理解Animate.css基于@keyframes和类名触发；2. 添加自定义动画如shake-custom并创建对应类；3. 用JavaScript控制动画顺序，如先fadeIn再shake-custom；4. 覆盖默认样式调整时长或缓动函数。结合使用需注意命名冲突与时长协调。

在使用 Animate.css 时，虽然它本身已经封装了大量基于 @keyframes 的预设动画，但你也可以自定义 @keyframes 并与 Animate.css 的类结合使用，实现更灵活的动画效果。下面介绍如何将两者结合使用。

1. 理解 Animate.css 的工作原理

Animate.css 实际上是通过 CSS 的 @keyframes 定义动画，然后通过类名触发这些动画。例如：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animated {
  animation-duration: 1s;
}
.fadeIn {
  animation-name: fadeIn;
}

当你给元素加上 class="animated fadeIn" 时，就会播放淡入动画。

2. 自定义 keyframes 与 Animate.css 类共存

你可以添加自己的 @keyframes 动画，并创建对应的类来使用，同时保留 Animate.css 提供的样式。

立即学习“前端免费学习笔记（深入）”；

例如，你想做一个“左右晃动”的自定义动画：

@keyframes shake-custom {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}
.shake-custom {
  display: inline-block;
  animation-name: shake-custom;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

现在你可以像使用 Animate.css 一样使用这个类：

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

<div class="shake-custom">我会左右晃动</div>

3. 结合 Animate.css 和自定义动画

如果你想让一个元素先执行 Animate.css 的 fadeIn，再执行自定义的 shake-custom，可以通过 JavaScript 控制动画顺序：

const el = document.querySelector('#myElement');
el.classList.add('animated', 'fadeIn');
el.addEventListener('animationend', function() {
  el.classList.remove('fadeIn');
  el.classList.add('shake-custom');
});

或者使用 setTimeout 控制时间间隔。

4. 覆盖或扩展 Animate.css 动画

你还可以修改 Animate.css 的默认行为，比如调整某个动画的持续时间或贝塞尔曲线：

/* 修改 bounceIn 效果 */
.bounceIn.custom-fast {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

然后这样使用：

<div class="animated bounceIn custom-fast">快速弹入</div>

基本上就这些。Animate.css 提供了便捷入口，而 @keyframes 给你完全控制权。结合使用时，注意命名不冲突、动画时长合理、用 JavaScript 控制流程会更灵活。

以上就是css animate.css与keyframes结合制作动画的详细内容，更多请关注php中文网其它相关文章！