Transition|CSS|learning-a.com

With transition, you can change an element from one style to another style in a specified duration. Of course, you can combine transition with transform to implement eye-catching visual effects.

Basic transition

You just need to define two transition states as the example below: #basicTrans, #basicTrans:hover. Then specify transition duration with code transition: 3s;; s indicats the time unit, seconds. Now simply move your mouse over the green rectangle, you can see color transition from green to yellow in 3 seconds. When you move your mouse out of the rectangle, the color will change back to green, back to the rectangle’s default color.

<html>
<head>
<style> 
	div #basicTrans{
		height:50px; width:200px;
		background-color: green;
		transition: 3s;
		
	}

	div #basicTrans:hover{		
		background-color: yellow;
	}
</style>

</head>
<body>
<div id="basicTrans"></div>
</body>
</html>

Transition with translate

To see more complicated transition effect, you can add transform: translate as in the example below. You can see here for more details about translate. When you move your mouse over the rectangle, it will change its color to red; at the same time, it will move 30px along x-axis, 5px along y-axis.

<html>
<head>
<style>
	div #translate{
		height:50px; width:200px;
		background-color: green;
		transition: 5s;
	}

	div #translate:hover
	{
		height:50px; width:200px;
		background-color: red;
		-ms-transform: translate(30px,5px);
		-webkit-transform: translate(30px,5px);
		transform: translate(30px,5px);
	}
</style>

</head>
<body>
<div id="translate"></div>
</body>
</html>