相信对于很多初学者，对于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; }