FADEFX
Elegant animations, easy implementation.

Learn more
Download
Animations, easier than ever.

easy integration

No weird JavaScript programming, just simple HTML & CSS.
simple control

Set your own custom durations and delays within a split second.
within seconds

Adding animations has never been so easy before.







No difficult code, easy to learn.



Example of a normal animation

<div class="fadefx-fadein-up">
Example of custom delay

<div class="fadefx-fadein-up :300ms">
Example of custom duration

<div class="fadefx-fadein-up ::1000ms">
Change the animation height

<div class="fadefx-fadein-up :100px">
Or even combine them

<div class="fadefx-fadein-up ::1000ms :200ms :100px">






In fact, this site uses FadeFX.
How to install
1
Download the latest version of FadeFX from the GitHub repository. You can just download the zip, containing fadefx.js and fadefx.css.
2
Unpack the zip file and place fadefx.js and fadefx.css into the folder where your HTML file(s) are, where you want to use fadefx.
3
Copy and paste the following code into the head of the HTML page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="fadefx.js"></script>
<link type="text/css" rel="stylesheet" href="fadefx.css"/></div>



4
You are ready to go!
Download