CSS动画库

网络上有很多动画库可以帮助您在网页上创建动画效果。这些库并非专注于动画的语法或技术，而是提供可以直接使用的预设动画。例如，只需添加一个类名，如“animate-flip-up”，就能让元素翻转向上。如果您想快速上手，这类库非常实用。

我个人建议您：1) 学习CSS动画语法，掌握动画的原理；2) 根据网站风格自定义动画。然而，探索这些库能激发灵感，提供代码示例，并为您的项目奠定基础。

让我们来看看这些库的概览。有些库采用不同的方法：仅提供所需的类、Sass mixin、轻量级的JavaScript库用于添加/删除类等等。但它们本质上都是“CSS动画库”。（有些库名称中带有“CSS3”，显得有些过时，现在大家已经很少这样称呼了。）

虽然动画可以增强趣味性和交互性，但请记住并非所有用户都喜欢在网页浏览时看到动画。请参考Eric Bailey的“Revisiting prefers-reduced-motion, the reduced motion media query”文章，了解如何适应偏好较少或没有动画的用户。

Animista

选择您喜欢的动画，它会提供一个类名，该类名调用关键帧动画（您需要复制粘贴两者）。重点是您只需使用所需的部分。

Animate.css

Dan Eden创作的经典CSS动画库之一。

tachyons-animate

Tachyons本身是一个原子CSS库，包含大量实用程序类，通过添加类来设计任何内容。tachyons-animate通过添加“单用途类来帮助您编排CSS动画”来扩展这些功能。它可以单独使用，但文档建议可以与其他动画库结合使用，因为辅助类具有通用性。

Infinite

这些动画，例如旋转和脉冲，专门设计为无限循环运行。

Motion UI

一个Sass库，用于创建灵活的CSS过渡和动画。

micron

一个使用CSS动画构建并由JavaScript控制的微型交互库。

Vivify

Vivify有点像Animate.css，因为它包含许多相同类型的动画。它也提供了许多自己的动画。

Hover.css

一组CSS3驱动的悬停效果，可应用于链接、按钮、徽标、SVG、特色图片等等。轻松应用于您自己的元素，修改或仅用于灵感。提供CSS、Sass和LESS版本。

AllAnimationCss3

Magic Animations CSS3

It’s Tuesday.

一个古怪的CSS动画库。

vhs

ReboundGen

CSShake

Motion CSS

cssanimation.io

WickedCSS

Woah.css

Obnoxious

Hexa

Mimic.css

以上是CSS动画库的详细内容。更多信息请关注PHP中文网其他相关文章！