css transition shorthand code example
Example 1: transition shorthand css
transition: [transition-property] [transition-duration]
[transition-timing-function] [transition-delay]
Example 2: css transition all
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
Example 3: transition transform
.section:hover {
transform: translateX(0px) translateY(75px);
}
.section {
transition: transform 500ms ease-in-out 25ms;
}
Example 4: 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;
}