css smooth transition on hover code example
Example 1: scss transition
div {
transition: all 0.5s ease;
background: red;
padding: 10px;
}
div:hover {
background: green;
padding: 20px;
}
Example 2: css background color transition
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
Example 3: css transition on hover
div {
color: white;
background-color: black;
}
div:hover {
background-color: red;
}
div {
background-color: black;
color: white;
height: 100px;
transition: width 1.5s, height 3s;
width: 100px;
}
div:hover {
background-color: red;
height: 300px;
width: 150px;
}