CSS3 Example Tutorial: CSS3 's transition

Article Introduction: believe for many beginners, for CSS3 transition in the end is directly written on the selector, or write on the hover of the selector to express doubts, the following gives two examples, I hope you can dispel doubts.

Believe for many beginners, for CSS3 transition in the end is directly written on the selector, or write on the hover of the selector to express doubts, the following Web teaching network to give two examples, Web teaching network hope you can dispel doubts.

<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 }