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