Janis Javascript Microframework for DOM Animation

// On Hover
Janis("#test1")
    .chain()
    .animate({
        "top" : "50px",
        "left" : "50px",
        "duration": 1000,
        "delay": 1000,
        "easing": "ease-in-out"
    })
    .execute();
        

// Infinite Looping
Janis("#test2")
    .chain()
    .animate({
        "width" : "200px",
        "height" : "200px",
        "left" : "0px",
        "top" : "0px",
        "duration" : 500,
        "easing": "ease-in-out"
    })
    .animate({
        "width" : "50px",
        "height" : "50px",
        "left" : "75px",
        "top" : "75px",
        "duration" : 500,
        "easing": "ease-in-out"
    })
    .loop(-1);
        

var pg = document.querySelector(".test3"),
    count = 0, bounce;
    
bounce = setInterval(function() {
    var el = document.createElement("div");
    el.className = "subject";
    el.style.left = 
        Math.floor(Math.random()*150) + "px";
    pg.appendChild(el);
    Janis(el).chain().animate({
        "top":  "180px",
        "delay" : 0,
        "duration" : 1000,
        "opacity": 1,
        "easing" : "ease-in"
    }).animate({
        "top": randomHeight + "px",
        "delay" : 0,
        "duration" : 1000,
        "easing" : "ease-out"
    }).loop();
    
    if (++count === 10) {
        clearInterval(bounce);
    }
}, 100);
        

var test4 = Janis('#test4');
test4.chain().animate({
    'rotate': '359deg',
    'duration': 5000,
    'delay': 0,
    'easing': 'linear'
}).animate({
    'rotate': '0deg',
    'delay': 0,
    'duration': 0
}).loop();