width: 100px;
height: 100px;
background: purple;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
The transition effect will take place when the width attribute is changed in value.
div:hover {
width: 300px;
}
Full code:
Hover over the element to see the transition effect:
Note : When the cursor moves away from the element, it will gradually change back to the original type.
Example: Add transition effects for both width and height attributes, with a duration of 2 seconds for width and 4 seconds for height.
div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}
The transition-timing-function attribute is used to determine the rate of change when converting.
The values available are as follows:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Run the following code yourself to see the difference:
The transition-delay attribute is used to determine the delay between the time a property changes and when the transition actually starts.
Example : Delay of 1 second before starting conversion.
div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
When dragging the mouse, the effect does not happen immediately but will be delayed 1s is the time that we set for it.
Full code:
Hover over the element to see the transition effect:
Transform Quantrimang learned in the previous lesson, go to the 2D Transform review here and 3D Transform here.
Combining Transition with Transform together will create extremely beautiful transition effect.
div {
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
The same effects at the beginning of the lesson also use a combination of Transition and Transform. You add some properties to change the color, style, font size . to your liking. The code below for your reference.
Previous lesson: 3D Transform in CSS
Next lesson: Animation animation effect in CSS