Installation
CSS Selectors
Event Handling
DOM Manipulation
Utilities
Data Structures
AJAX APIs
Animation APIs
Widgets Creation
CSS Property Animation
CSS properties which are numerically represented can be animated using CSS animation type. This animation type is accompanied by "prop". 
					{
						to         : 0.5,
						anim       : "Color.smooth",
						duration   : 2000,
						prop       : "opacity"
					}


Example 1 - Animate Opacity from 1 to 0.2
JS HTML CSS 
		$.domLoaded(function() {

			$.get("#ani").on("click", function() {
			
				// Change opacity
				$.get("#box1").animate({
					from : 1.0,
					to : 0.2,
					anim : "CSS.smooth",
					prop : "opacity",
					duration : 1000
				});					
			});						
		});							
						
<body>
	
	<input type="button" id="ani" value="Animate" /> 

	<br/>
	
	<div id="box1"></div>

</body>
	div {
		margin : 10px;
		padding: 5px;
		background-color : #f00;
		width : 70px;
		height : 70px;		
	}
Result

Example 2 - Animate border color from black to red
JS HTML CSS 
		$.domLoaded(function() {

			$.get("#ani").on("click", function() {
			
				// Change border width
				$.get("#box1").animate({
					to : 50,
					anim : "CSS.smooth.return",
					prop : "border-width",
					duration : 2000
				});	
			});		
		});							
				
<body>
	
	<input type="button" id="ani" value="Animate" /> 

	<br/>
	
	<div id="box1"></div>

</body>
	div {
		margin : 10px;
		padding: 5px;
		width : 70px;
		height : 70px;	
		border : 10px solid #000;
	}
Result

Example 3 - Change text color to blue
JS HTML CSS 
		$.domLoaded(function() {

			$.get("#ani").on("click", function() {
			
				// Change font-size
				$.get("#box1").animate({
					to : 50,
					anim : "CSS.smooth",
					prop : "font-size",
					duration : 1000
				});	
			});
		});	
<body>
	
	<input type="button" id="ani" value="Animate" /> 

	<br/>
	
	<div id="box1">Change this text size to 50px</div>
	
</body>
	div {
		margin : 10px;
		padding: 5px;
		color : #f00;
		font-size : 20px;		
	}
Result