Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/khaosdoctor/delay.css
:hourglass: CSS Helpers to control CSS animation timming
https://github.com/khaosdoctor/delay.css
animatecss control-animation-timmings css-animation-timmings css-helpers delays duration sass
Last synced: 5 days ago
JSON representation
:hourglass: CSS Helpers to control CSS animation timming
- Host: GitHub
- URL: https://github.com/khaosdoctor/delay.css
- Owner: khaosdoctor
- License: mit
- Created: 2016-09-26T22:59:33.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T14:43:19.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T09:58:58.590Z (7 months ago)
- Topics: animatecss, control-animation-timmings, css-animation-timmings, css-helpers, delays, duration, sass
- Language: JavaScript
- Homepage: https://khaosdoctor.github.io/delay.css
- Size: 395 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# delay.css [](https://travis-ci.org/khaosdoctor/delay.css) [](https://raw.githubusercontent.com/khaosdoctor/delay.css/master/LICENSE) [](https://github.com/khaosdoctor/delay.css/issues) [](https://david-dm.org/khaosdoctor/delay.css?type=dev)
> CSS animation timming helpers
### Build Status
Branch Master: [](https://travis-ci.org/khaosdoctor/delay.css)
Branch dev: [](https://travis-ci.org/khaosdoctor/delay.css)
## Whats is it
Delay.css works best along with [Daniel Eden's](https://github.com/daneden) [Animate.css](https://github.com/daneden/animate.css), by including CSS classes and helpers to control animation timmings and delays, but it works on any kind of CSS animations as well.
In other words, it is possible to add sequential animations or increase the duration of a particular animation using only a tiny helper class.
> But we can also do this with CSS3, why add this?
Because of the same reason we have [Animate.css](https://github.com/daneden/animate.css), it is just easier to implement something that has already been done and tested than create something from scratch.
### TL;DR
Delay.css was created to help you control your CSS animation timmings within a project.
## Installing
```
$ bower install delay.css --save
```
It also works with npm:
```
$ npm i delay.css --save
```
## Using
First of all, add the css to your document's head:
```html
```
Then select the desired duration or delay.
Delay.css is divided into 100ms blocks that goes from 100 to 6000 (100ms to 6s) of timming control, and two simple classes `.delay-` and `.duration-`.
This can be easily adjusted if you need less or more timming control (as you will see in the next section). Each class will delay the start of the animation by the amount of miliseconds it describes. So the class `.delay-100` will delay the start of the start of the animation by 100ms and `.duration-100` will __force__ the animation to have 100ms long.
This can be easily adjusted if you need less or more timming control (as you will see in the next section).
To use it, just add the corresponding classes to your elements, for instance:
```html
This is a header
```
Try it out in your css, or [see it in action](https://khaosdoctor.github.io/delay.css/demo.html).
### Custom builds
To add or remove timmings from your customized version of this project, just go to the `src` folder and modify the file called `delay.scss`.
There will be 3 Sass variables, `$i` (which stands for `increment`, do __not__ touch this!), `$maxms` which will be the max time your delay/duration will have and `$hops` which, of course, will be the size of the "jumps" between values.
Example:
```scss
$i: 0;
$maxms: 7500;
$hops: 500;
```
> The same goes for LESS files, just change the `delay.scss` to `delay.less` and the `$` to `@`
Will generate a file containing `.delay-` and `.duration-` classes that goes from 500 to 7500ms jumping in ranges of 500ms each.
- .delay-500
- .delay-1000
- .delay-1500
- ...
As this uses Sass, you'll need to build it using your own sass compiler or running the gulpfile included in the project when you download it, just type `npm i` (if you didn't install the dependencies) then `gulp` and it will create a `dist` folder with your alterations.
## Wanna join the team?
Yeah! I'm always looking to find someone eager to contribute to this humble project! So, if you didn't yet, please read the [guidelines](CONTRIBUTING.md) before sending anything, this way we can discuss things more easily.
Also, all the contributors here must agree to the [Contributor Covenant](http://contributor-covenant.org/) code of conduct.
Once you are confortable, commit away! I promisse to read it ok?
## License
MIT 2.0 © [Lucas Santos](https://github.com/khaosdoctor)