generated from argyleink/shortstack
-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
9 additions
and
10 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 |
---|---|---|
@@ -1,16 +1,15 @@ | ||
# Contributing to Animate.css | ||
# Contributing to transition.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. | ||
Thanks for your interest in contributing! Before contributing, please make sure you understand the guidelines provided here. | ||
|
||
## 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. | ||
Transitions, like many facets of visual and interaction design, can be highly subjective. Maintaining a consistent library of transitions in an active community can be difficult; these design guidelines are designed to help encourage thoughtful criticism of new transitions that are proposed for transition.css. | ||
|
||
The animations in Animate.css should follow a few key principles: | ||
The transitions in transition.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. | ||
- **Transitions should be tolerable.** Transitions should be tolerable, seeing them repeatedly should not become too annoying or overbearing. | ||
- **Transitions should not interfere with document flow or control/input availability.** In other words, the absence of an transition should never reduce usability of a product: they should be non-critical and seen as “progressive enhancements”. | ||
- **Transitions should be helpful.** They should be designed to move users through moments of interest, ease natural reading order, or to communicate relationships between spaces. | ||
- **Transitions should feel familial.** Avoid introducing transitions that feel out-of-place compared to the existing set. | ||
- **Transitions should feel natural.** Transitions should reflect, as much as is reasonable, motion that occurs in natural physics. Avoid extreme timing functions, and model transitions on real-world events. |