CSS3 transitions allow us to change from one property value to another over a given duration.
transition-property – specifies the property to be transitioned
transition-duration – specifies the duration over which transitions should occur
transition-timing-function – specifies how the pace of the transition changes over its duration
transition-delay – specifies a delay (in seconds) for the transition effect
In the example below, we set the transition property to transform, with a duration of 5 seconds, and with an ease-in timing function that specifies a transition effect with a slow start.
transition: transform 5s ease-in;
The Transition Property
In the example below, the div element has width and height of 50px, with a green background. We specified a transition effect for the width property, with a duration of 3 seconds:
The CSS will look like this:
transition: width 3s;
If you hover over the div element, it will move from left to right.
The transition-timing-function property specifies the speed curve of the transition effect.
It can have the following values:
ease – the animation starts slowly, then accelerates quickly.
ease-in – starts slowly, then accelerates, and stops abruptly.
ease-out – starts quickly, but decelerates to a stop.
ease-in-out – similar to ease, but with more subtle acceleration and deceleration.
linear – constant speed throughout the animation; often best for color or opacity changes.
Finally, we have cubic-bezier(), which allows you to define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1.
CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE.
© License: All Rights Reserved
CONTACT HOLLA TECH – LEARN SUPPORT