bhargav2785/dabblet.css

## dabblet.css
/**
 * Explaining CSS timing functions
**/

.functions{
	position: relative;
	width: 50%;
	top: 50px;
	background: #000;
	padding: 20px;
	border-radius: 10px;
}
.functions > div{
	width: 10%;
	height: 40px;
	display: block;
	margin: 20px 0;
	opacity: 0.5;
	background-image: linear-gradient(
		45deg,
		rgba(255, 255, 255, .3) 25%, transparent 25%,
		transparent 50%, rgba(255, 255, 255, .3) 50%,
		rgba(255, 255, 255, .3)75%, transparent 75%,
		transparent 100%
	);
	background-size: 40px 40px;
	border-radius: 5px;
	transition-duration: 2s;
}
.transition{
	width: 100% !important;
	opacity: 1 !important;
	transition-property: all;
}
.ease{
	background: maroon;
	transition-timing-function: ease;
}
.linear{
	background: green;
	transition-timing-function: linear;
}
.ease-in{
	background: #903AB2;
	transition-timing-function: ease-in;
}
.ease-out{
	background: orange;
	transition-timing-function: ease-out;
}
.ease-in-out{
	background: #395A95;
	transition-timing-function: ease-in-out;
}

## dabblet.html
<!-- better explaind at http://jsfiddle.net/bhargav2785/yPvS8/ -->
<html>

<head>
<script src='///ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script type='javascript'>
	(function($){
	$('.functions').on({
		mouseenter: function(){
			$(this).find('.function').addClass('transition');
		},
		mouseleave: function(){
			$(this).find('.function').removeClass('transition');
		}
	});
})(jQuery);
</script>
</head>

<body>
<div class='functions'>
	<div class='default'></div>
	<div class='linear'></div>
	<div class='ease-in'></div>
	<div class='ease-out'></div>
	<div class='ease-in-out'></div>
</div>
</body>

</html>

## settings.json
{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Explaining CSS timing functions
	**/

	.functions{
	position: relative;
	width: 50%;
	top: 50px;
	background: #000;
	padding: 20px;
	border-radius: 10px;
	}
	.functions > div{
	width: 10%;
	height: 40px;
	display: block;
	margin: 20px 0;
	opacity: 0.5;
	background-image: linear-gradient(
	45deg,
	rgba(255, 255, 255, .3) 25%, transparent 25%,
	transparent 50%, rgba(255, 255, 255, .3) 50%,
	rgba(255, 255, 255, .3)75%, transparent 75%,
	transparent 100%
	);
	background-size: 40px 40px;
	border-radius: 5px;
	transition-duration: 2s;
	}
	.transition{
	width: 100% !important;
	opacity: 1 !important;
	transition-property: all;
	}
	.ease{
	background: maroon;
	transition-timing-function: ease;
	}
	.linear{
	background: green;
	transition-timing-function: linear;
	}
	.ease-in{
	background: #903AB2;
	transition-timing-function: ease-in;
	}
	.ease-out{
	background: orange;
	transition-timing-function: ease-out;
	}
	.ease-in-out{
	background: #395A95;
	transition-timing-function: ease-in-out;
	}
	<!-- better explaind at http://jsfiddle.net/bhargav2785/yPvS8/ -->
	<html>

	<head>
	<script src='///ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
	<script type='javascript'>
	(function($){
	$('.functions').on({
	mouseenter: function(){
	$(this).find('.function').addClass('transition');
	},
	mouseleave: function(){
	$(this).find('.function').removeClass('transition');
	}
	});
	})(jQuery);
	</script>
	</head>

	<body>
	<div class='functions'>
	<div class='default'></div>
	<div class='linear'></div>
	<div class='ease-in'></div>
	<div class='ease-out'></div>
	<div class='ease-in-out'></div>
	</div>
	</body>

	</html>