transition

transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;

Property	Initial Value	Description
transition-property	all	Individually specifies the properties to apply the effect to.
transition-duration	-	Specifies the duration of the animation.
transition-delay	0s	Specifies the delay from the event start to when the animation begins.
transition-timing-function	ease	Specifies the timing and progression of the animation.

The above properties can all be specified together with the 'transition' property, separated by spaces. The order of specification is

1. 'The property to animate' (transition-property)
2. 'The animation duration' (transition-duration)
3. 'The delay from the action to when the animation starts' (transition-delay)
4. 'The timing and progression of the animation' (transition-timing-function)

Only the 'animation duration' value is required; the others can be omitted. Omitted values are treated as if the initial value was specified.

The following sample shows the syntax written out in plain English.

div {
	transition: property-to-animate(optional) animation-duration delay-before-animation-starts(optional) animation-timing(optional);
	-webkit-transition: property-to-animate(optional) animation-duration delay-before-animation-starts(optional) animation-timing(optional);
	-moz-transition: property-to-animate(optional) animation-duration delay-before-animation-starts(optional) animation-timing(optional);
	-ms-transition: property-to-animate(optional) animation-duration delay-before-animation-starts(optional) animation-timing(optional);
}

div {
	background: #f00;
	width: 200px;

	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
}
div:hover {
	width: 300px;
}

※ Version data is based on MDN / Can I Use.

Specifying the 'transition' property enables animation (change over time) when design changes occur due to 'pseudo-classes' or JavaScript.

The following sample specifies each sub-property together. Since 'width' is specified as the 'property to animate', it does not apply to 'background'. Since '1s' is specified as the 'delay before animation starts', there is a 1-second lag from the event start to when the animation begins. 'ease-in' is specified as the 'animation timing' to change the movement of the animation.

div {
	background: #f00;
	width: 200px;

	transition: width 0.5s 1s ease-in;
	-webkit-transition: width 0.5s 1s ease-in;
	-moz-transition: width 0.5s 1s ease-in;
	-ms-transition: width 0.5s 1s ease-in;
}
div:hover {
	width: 300px;
	background: #ff0;
}

Multiple properties can be specified for the 'property to animate' by separating them with ','. Note that when specifying multiple items together, other values such as the 'delay before animation starts' must also be specified individually for each.

div {
	background: #f00;
	width: 200px;
	height: 100px;

	transition: width 0.5s ease-in, height 0.5s 1s ease-in;
	-webkit-transition: width 0.5s ease-in, height 0.5s 1s ease-in;
	-moz-transition: width 0.5s ease-in, height 0.5s 1s ease-in;
	-ms-transition: width 0.5s ease-in, height 0.5s 1s ease-in;
}
div:hover {
	width: 300px;
	height: 200px;
	background: #ff0;
}

Note that 'transition'-related properties must be specified on the element before the event starts. Specifying them after the event (e.g., in ':hover') will not work as expected.

All the samples so far have used CSS, but animation also works when design changes are made with JavaScript.
For smartphones, it is more common to use JavaScript events like 'touch' and 'flick' than pseudo-class events alone.

div {
	background: #f00;
	width: 200px;

	transition: 0.5s ease-in;
	-webkit-transition: 0.5s ease-in;
	-moz-transition: 0.5s ease-in;
	-ms-transition: 0.5s ease-in;
}

<script>
	window.addEventListener("load", function(){
		var elem = document.getElementById("test");
		if(elem){
			elem.addEventListener("mouseover", function(){
				this.style.width = "300px";
			}, false);
		}
	}, false);
</script>
<p>When you hover over the element, 'width' changes to 300px. Unlike CSS pseudo-classes, since JavaScript is used to change the width, it will not return to the original 200px. If you want to restore it, you need to implement that logic in JavaScript as well.</p>
<div id="test">When you hover, the width changes to 300px.</div>