hover的transition

相信对于很多初学者，对于css3的transition到底是直接写在选择器上，还是写在选择器的hover上表示疑惑，下面给出两个实例，希望可以为您解惑。

<div id="demo1" class="demo">demo1</div>
<div id="demo2" class="demo">demo2</div>

.demo{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	border: 10px solid #ccc;
	border-radius: 60px;
	font-size: 20px;
	-webkit-backface-visibility: hidden;
}
#demo1{
	-webkit-transition:border-color 0.3s ease;
	-moz-transition:border-color 0.3s ease;
	-ms-transition:border-color 0.3s ease;
	-o-transition:border-color 0.3s ease;
	transition:border-color 0.3s ease;
}
#demo1:hover{
	border-color: #A3D7FF;
}
#demo2{
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;
}
#demo2:hover{
	background-color:#A3D7FF;
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);
	-webkit-transition:background-color 0.3s ease;
	-moz-transition:background-color 0.3s ease;
	-ms-transition:background-color 0.3s ease;
	-o-transition:background-color 0.3s ease;
	transition:background-color 0.3s ease;
}

demo