css transition smooth 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: transition transform
.section:hover {
transform: translateX(0px) translateY(75px);
}
.section {
transition: transform 500ms ease-in-out 25ms;
}
Example 4: css opacity transition
div {
transition: opacity seconds;
}