transiciones.html

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>TRANSICIONES</title>
</head>
<style type="text/css">
	div{
		width: 100px;
		height: 100px;
		color: #1E93EE;
		background: black;
		transition: width 2s;
	}
	#div1{
		transition-timing-function: linear;
	}
	#div2{
		transition-timing-function: inherit;
	}
	#div3{
		transition-timing-function: initial;
	}
	#div4{
		transition-timing-function: ease-in;
	}
	#div5{
		transition-timing-function: ease-out;
	}
	#div6{
		transition-timing-function: ease-in-out;
	}
	#div7{
		transition-timing-function: step-start;
	}

	div:hover{
		width: 300px;
	}
</style>
<body>
	<div id="div1">CONTENEDOR</div>
	<br>
	<div id="div2">CONTENEDOR</div>
	<br>
	<div id="div3">CONTENEDOR</div>
	<br>
	<div id="div4">CONTENEDOR</div>
	<br>
	<div id="div5">CONTENEDOR</div>
	<br>
	<div id="div6">CONTENEDOR</div>
	<br>
	<div id="div7">CONTENEDOR</div>
</body>
</html>