animate.css README

The project's README from github.com/animate-css/animate.css. As one markdown file: README.md.

Animate.css

GitHub Version Github Star Github Fork License

If you need the old docs - v3.x.x and under - you can find it here.

Just-add-water CSS animation

Installation

Install with npm:

npm install animate.css --save

Install with yarn:

yarn add animate.css

Getting Started

You can find the Animate.css documentation on the website.

Accessibility

Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.

Core Team

Daniel Eden Elton Mesquita Waren Gonzaga
Daniel Eden Elton Mesquita Waren Gonzaga
Animate.css Creator Maintainer Core Contributor

License

Animate.css is licensed under the Hippocratic License.

Code of Conduct

This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected].

Contributing

Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important.

animate.css (animate-css/animate.css)

Searching Database…

这是什么?Animate.css 是一个跨浏览器的现成 CSS 动画库,你可以直接把它放进页面,为淡入淡出、弹跳、滑动等元素添加动画。
这是一个 JS 框架,还是只是一个样式表?它是一个纯 CSS 样式表,而不是 JavaScript 库。你需要引入 CSS 文件,然后自己为元素切换动画类。
我该怎么把它添加到项目里?通过 npm 或 yarn 安装,或直接引入构建好的 CSS 文件,然后把提供的动画类应用到你的 HTML 元素上。
使用它需要构建工具或 JS 框架吗?不需要任何框架。它在开发时使用 PostCSS 构建,但最终发布的是编译好的纯 CSS 文件,没有运行时依赖。
这些动画会对每个用户都播放吗?不一定。Animate.css 会遵循 prefers-reduced-motion 设置,因此在操作系统中开启了“减少动态效果”的用户看不到这些动画。
它包含哪些类别的动画?核心团队提到了淡入淡出、弹跳等类别。贡献者添加新动画时,需要遵循这一命名约定(camelCase,并按淡入淡出、弹跳等类型分类)。
我该如何向项目提交新动画?提交拉取请求(pull request),遵循 camelCase 命名约定和分类方式,并附上一个在 CodePen 中展示该动画的演示。
在哪里可以找到完整文档和使用示例?完整的 Animate.css 文档(包括使用示例)发布在项目的官方网站上,而不是在 README 中。
What are similar projects?CSS-Inspiration, iCSS, SpinKit, pure, anime, yeti, html-ppt-skill, devicon
Size
2 MB
Stars
82.9K
Age
15y
Commits · 90 Days