Zoom
Zoom recording - starts at 01:00Links
Properties
- transition
- transition-delay: time to wait to start
- transition-duration: time to run
- transition-property: properties to change
- transition-timing-function: which timing function
Must specify element to be transitioned and duration. You can specify multiple elements and duration times. A comma must be inserted between multiple elements. Elements only change from beginning state to ending state with no in-between.
transition: width 2s, height 4s;
Shorthand
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
Speed Curve of the Transition
- Ease: Default. slow start, fast, slow end
- Linear: even timing
- Ease-in: slow start
- Ease-out: slow end
- Ease-in-out: slow start and slow end
- Cubic-bezier(n,n,n,n): See below
Cubic-bezier
W3schools states "A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.".
Syntax: cubic-bezier(x1,y1,x2,y2)
Transition + Transform
You can do a transform at the same time you are doing a transition.
Examples
Shrinking Box
Click red box and hold to see transition.
#rolling-box {
width: 200px;
height: 200px;
background-color: maroon;
transition: width 3s, height 3s, background-color 3s, border-radius 2s, transform 3s;
transform: rotate(0deg);
}
#rolling-box:active {
width: 50px;
height: 50px;
background-color: #3c76a6;
border-radius: 50%;
transform: rotate(45deg);
}Hidden text
Hover over gray box to see transition.
#hidden-content {
height: 30px;
width: 300px;
background-color: #bababa;
color: #fff;
transition: height 0.5s;
overflow: hidden;
}
#hidden-content:hover {
height: 180px;
}