-
Notifications
You must be signed in to change notification settings - Fork 16.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Improved bounce * Improved pulse * Improved bounceInDown * Improved bounceInLeft * Improved bounceInRight * Improved bounceInUp * Improved bounceOutDown * Improved bounceOuLeft * Improved bounceOuRight * Improved bounceOutRight * Improved fadeInDown * Improved fadeInDownBig * Improved fadeInLeft * Improved fadeInLeftBig * Improved fadeInRightBig * Improved fadeInUp * Improved fadeInUpBig * Improved fadeInRight * Reverted fade animations * Compiled * Updated prefers-reduced-motion support on README * Add .delay-1s (#982) The .delay-1s is missing from the readme * HTTPS relevant links on README (#972) prevents HTTP redirects * Create CONTRIBUTING.md (#1033) Co-authored-by: Melek REBAI <[email protected]> Co-authored-by: Christian Oliff <[email protected]> Co-authored-by: Daniel Eden <[email protected]>
- Loading branch information
1 parent
dfb0aba
commit ec10e85
Showing
15 changed files
with
315 additions
and
270 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
# Contributing to Animate.css | ||
Thanks for your interest in contributing to Animate.css! Before contributing, please make sure you understand the guidelines provided here. Animate.css is widely used, so it’s important to maintain a high level of quality and to contribute with the interests of the community in mind. | ||
|
||
## Design Guidelines | ||
Animations, like many facets of visual and interaction design, can be highly subjective. Maintaining a consistent library of animations in an active community can be difficult; these design guidelines are designed to help encourage thoughtful criticism of new animations that are proposed for Animate.css. | ||
|
||
The animations in Animate.css should follow a few key principles: | ||
|
||
- **Animations should be subtle.** Avoid creating animations that involve large translations, or span a natural duration of longer than 1 second. | ||
- **Animations should be tolerable.** Related to subtlety, animations should be tolerable—seeing them repeatedly should not become too annoying or overbearing. | ||
- **Animations should not interfere with document flow or control/input availability.** In other words, the absence of an animation should never reduce usability of a product: they should be non-critical and seen as “progressive enhancements”. Avoid animations that change properties such as `position` or `display`. | ||
- **Animations should be helpful.** They should be designed to guide users to a point of interest, ease natural reading order, or to communicate relationships between elements. | ||
- **Animations should feel familial.** Avoid introducing animations that feel out-of-place compared to the existing set. | ||
- **Animations should feel natural.** Animations should reflect, as much as is reasonable, motion that occurs in natural physics. Avoid extreme timing functions, and model animations on real-world events. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -256,16 +256,16 @@ It's possible to change animate's prefix on your custom build. Just change the ` | |
|
||
## Accessibility | ||
|
||
Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently Firefox, OSX Safari and iOS Safari), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required. | ||
Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) 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. | ||
|
||
## License | ||
|
||
Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT) | ||
Animate.css is licensed under the MIT license. (https://opensource.org/licenses/MIT) | ||
|
||
## Code of Conduct | ||
|
||
This project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [[email protected]](mailto:[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](http://codepen.io). That **last one is important**. | ||
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](https://codepen.io). That **last one is important**. |
Oops, something went wrong.