CSS.js

A library to quickly create CSS and animations with JavaScript without CSS files.

Test with

<div class="moro"/> 

Then write

css().bind(".moro", {
  width : "100px",
  height:"100px",
  "background-color" : "blue"
});

css().bind(".moro:hover", {
        "background" : "linear-gradient(#666, #333)"
    });

Code above in Codepen

Animation

Having above example, but adding a class

<div class="moro viewIn"/> 

Then:

var inPosition = {
    "transform" : "translate(0,0)",
    
};
var outPosition = {
    "transform" : "translate(-130px,0px) rotate(90deg)",
    "opacity" : 0
};

css().animation("viewIn", {
    duration : "1s",
    "iteration-count" : 1,
},  outPosition,  inPosition); 

Try in CodePen

Gradient animation

Simple gradient animation is possible if you have two gradients and animate their opacity

Try in CodePen

Browser compatibility testing

Feedback is welcome. On the desktop browsers the limit goes on IE9, basic features work but not animations. IE10+ also animations work, so that's approximately the browser compatibility limit on desktop. On mobile at least Android 4.1 and 2.3 seems to work. On 2.2 the Codepen did not work :(. iOS 5 & 4 & 3 seem to work.

License

MIT. Or whatever you need.