Similar to animate.css, fader.css is for simple fade in and fade out animations. Just include the fader.css or fader.min.css in your project and add water, as they say. Add .fade-in or .fade-out appropriatly for the default fade animation. If you would like to delay your fade animation just add another class to the same tag, that sets the time, in seconds, you want to delay. For example if I want a 0.1 second delay, just add the class .zero-one to the same tag, so your classes would look like class="fade-in zero-one" Or say you want a longer one: class="fade-in five". fader.css can be useful for a cool cascading effect with your html elements or just to add that simple fade in and out "loading" effect. Plus it just looks nice.
Currently only supports single decimal place numbers for delay and only goes up to five seconds.
- Just clone or download this repository and include
fader.cssorfader.min.cssin your project. Simple as that.
class="fade-in three-five"class="fade-out four-three"class="fade-in two"class="fade-out one-eight"
Make sense? For class="fade-in three-four" think to yourself "fade in for 3.4 seconds".
Check out the demo page.
- safari
- chrome
- opera
- firefox
- NOT internet explorer.....I think...idk and I kind of dont care.
Feel free to pull request and add more cool stuff or just do it on your local copy. Hit me up with any questions and concerns.