transition css hover

1/* Transition is how much my element will take time to change his state 
2   or apply a specific style on it at specific */
3.my-div{
4  background-color: #f00; /*Red*/
5  transition: 3s ease-in-out;
6  /* transition: .5s ease-in-out; [0.5 seconds] */
7}
8.my-div:hover{
9  background-color: #00f; /*Blue*/
10}
11/* .my-div background-color will be changed from red to blue in 3 seconds*/

1/* Answer to: "css transition opacity" */
2
3/*
4  CSS transitions allows you to change property values smoothly,
5  over a given duration.
6*/
7
8.myClass {
9  vertical-align: top;
10  transition: opacity 0.3s; /* Transition should take 0.3s */
11  -webkit-transition: opacity 0.3s; /* Transition should take 0.3s */
12  opacity: 1; /* Set opacity to 1 */
13}
14
15.myClass:hover {
16  opacity: 0.5; /* On hover, set opacity to 2 */
17}
18
19/* 
20  From `opacity: 1;` to `opacity: 0.5;`, the transition time should
21  take 0.3 seconds as soon as the client starts to hover over the
22  element.
23*/

1div {
2  transition: background-color 0.5s ease;
3  background-color: red;
4}
5div:hover {
6  background-color: green;
7}

1/* Simple CSS color transition effect on selector */
2
3div {
4	color: white;
5  	background-color: black; 
6}
7
8div:hover {
9	background-color: red;
10}
11
12
13/* Additional transition effects on selector */
14
15div {
16	background-color: black;
17  	color: white;
18  	height: 100px;
19  	transition: width 1.5s, height 3s;
20  	width: 100px;
21  	
22}
23
24div:hover {
25	background-color: red;
26  	height: 300px;	
27  	width: 150px;
28}
29