可通过自定义@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 一样使用这个类：
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情
我会左右晃动
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);}
然后这样使用：
快速弹入
基本上就这些。Animate.css 提供了便捷入口，而 @keyframes 给你完全控制权。结合使用时，注意命名不冲突、动画时长合理、用 JavaScript 控制流程会更灵活。
以上就是css animate.css与keyframes结合制作动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1049473.html
微信扫一扫 
支付宝扫一扫 
