Transition css hover

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

Transition on hover

div {
  transition: background-color 0.5s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}

Source: css-tricks.com

Similar codes

0 vote231 views1 answer
Webkit scrollbar padding
CSS
2 votes235 views3 answers
Remove border css
CSS
0 vote236 views1 answer
Souligner titre css
CSS
0 vote255 views1 answer
Mac input shadow
CSS
120 votes232 views6 answers
Font-weight css
CSS
185 votes328 views6 answers
Attach css file to html
CSS
0 vote223 views1 answer
How to resize img in css
CSS
-1 vote269 views2 answers
Css clip path text
CSS
0 vote250 views1 answer
Css tips and tricks to handle the complicated stuffs in design part which is helpfull to handle at tha critical time and to deliver requirement to the client to the main resource
CSS
6 votes250 views2 answers
CSS set input text to word wrap
CSS