Questions And Answers

More Tutorials

CSS Transitions

CSS transitions provide a way to control animation speed when changing CSS properties. ... With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

Parameter Details
transition-property The specific CSS property whose value change needs to be transitioned (or) all, if all the transitionable properties need to be transitioned.
transition-duration The duration (or period) in seconds (s) or milliseconds (ms) over which the transition must take place.
transition-timing-function A 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().
transition-delay The amount of time that must have elapsed before the transition can start. Can be specified in seconds (s) or milliseconds (ms)


transition: background-color 1s;

  • transition-property: Specifies the CSS properties the transition effect is for. In this case, the div will expand both horizontally and vertically when hovered.
  • transition-duration: Specifies the length of time a transition takes to complete. In the above example, the height and width transitions will take 1 second and 500 milliseconds respectively.
  • transition-timing-function: Specifies the speed curve of the transition effect. A linear value indicates the transition will have the same speed from start to finish.
  • transition-delay: Specifies the amount of time needed to wait before the transition effect starts. In this case, the height will start transitioning immediately, whereas the width will wait 1 second.


In this page (written and validated by ) you learned about CSS Transitions . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS Animations.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.