https://github.com/chantastic/ease.css
transition-timing functions as css classes
https://github.com/chantastic/ease.css
Last synced: 5 months ago
JSON representation
transition-timing functions as css classes
- Host: GitHub
- URL: https://github.com/chantastic/ease.css
- Owner: chantastic
- Created: 2014-11-21T23:35:45.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-11-22T00:32:02.000Z (over 11 years ago)
- Last Synced: 2026-01-22T22:45:40.630Z (5 months ago)
- Language: CSS
- Size: 141 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.markdown
Awesome Lists containing this project
README
## Why
This is a prototyping tool. I can never remember how to define these and I want
them available in an HTML prototype.
## Installation
#### Prototype install
```html
```
#### NPM
```bash
npm install ease.css
```
#### Bower
```bash
bower install ease.css
```
## Use
Write your transition styles as normal:
```css
.my-element {
transition: all .3s;
}
```
In your markup use your class and the name of the transition timing function
you'd like to see applied.
```html
...
```
The class-based transition timing function will override the one set in your
class.
## Animations
```css
ease-in-quad
ease-in-cubic
ease-in-quart
ease-in-quint
ease-in-sine
ease-in-expo
ease-in-circ
ease-in-back
ease-out-quad
ease-out-cubic
ease-out-quart
ease-out-quint
ease-out-sine
ease-out-expo
ease-out-circ
ease-out-back
ease-out-quad
ease-out-cubic
ease-in-out-quart
ease-in-out-quint
ease-in-out-sine
ease-in-out-expo
ease-in-out-circ
ease-in-out-back
```