[English] - [Türkçe]

ABOUT

cssAnimate.js, working parallel with animate.min.css file, is a simple animation Jquery add in. Anyone who wants can contribute to develop this program.

WHO DID IT?

This program was developed by Hamza EMRE in August 28, 2015 in the late hours in company with coffee.

BROWSER SUPPORT

Since CssAnimate.js has developed with Jquery works compatible with scanners which library supports.

HOW TO USE?

To works cssAnimate.js, firstly we should include Jquery and Css files.

< script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js">
< script type="text/javascript" src="js/cssAnimate.min.js">
< link href="css/animate.min.css" rel="stylesheet">
After we have included the files, we can use the following samples.

COMMENTS

PARAMETERS

effect

It is not compulsory

Which determines the whether the animation works perpetual or not.
Default value: bounce
The values which take: https://daneden.github.io/animate.css/

$(function() {
    $('#div_name').cssanimate({
        effect: bounce
    });
});

infinite

It is not compulsory

It determines whether the animation works perpetual or not.
Default value: false
The values which take: true, false

$(function() {
    $('#div_name').cssanimate({
        infinite: false
    });
});

action

It is not compulsory

It determines how works the animation.
Default value: none
The values which take: none, click, mouseenter, dblclick, mouseover, mousemove

$(function() {
    $('#div_name').cssanimate({
        action: none
    });
});

debug

Partially compulsory

It gives a warning if there is a mistake while you are working the add-on.
Default value: false
The values which take: false, true

$(function() {
    $('#div_name').cssanimate({
        debug: false
    });
});

autocolor

It is not compulsory

It produces color randomly.
Default value: false
The values which take: false, true

$(function() {
    $('#div_name').cssanimate({
        autocolor: false
    });
});

duration

ZORUNLU DEĞİL

Animation, applied an object which kind of css declared, takes action within the prescribe time.
Default value: 5
The values whict take: numerical value

$(function() {
    $('#div_name').cssanimate({
        duration: 5
    });
});

Simple Sample

When you click on the heart picture eternal animations begin.

$('#heartImage').cssanimate({
    effect: "pulse",
    infinite: true,
    action: "click"
});

Other Samples

For examining the other samples you can visit the other document page.

Sample Animations

Materials used in the examples

You can check on the materials list which we used our samples.

cssAnimate.js - animate.min.css - İconFinder - Jquery -