CSS Transitions

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Syntax

  • transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

Parameters

ParameterDetails
transition-propertyThe specific CSS property whose value change needs to be transitioned (or) all, if all the transitionable properties need to be transitioned.
transition-durationThe duration (or period) in seconds (s) or milliseconds (ms) over which the transition must take place.
transition-timing-functionA function that describes how the intermediate values during the transition are calculated. Commonly used values are ease, ease-in, ease-out, ease-in-out, linear, cubic-bezier(), steps(). More information about the various timing functions can be found in the W3C specs.
transition-delayThe amount of time that must have elapsed before the transition can start. Can be specified in seconds (s) or milliseconds (ms)

Remarks

Some older browsers support only vendor-prefixed transition properties:

  • -webkit: Chrome 25-, Safari 6-, Safari & Chrome for iOS 6.1-, Android 4.3- Browser, Blackberry Browser 7-, UC Browser 9.9- for Android.
  • -moz: Firefox 15-.
  • -o: Opera 11.5-, Opera Mobile 12-.

Example:

-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;


Got any CSS Question?