Learn How to Add CSS Transitions to Your Webpage

If you are working with web technologies like CSS, HTML, and JavaScript, it's useful to have some basic knowledge about CSS transitions. It is the simplest way to animate your components. In this tutorial, you are going to learn how to add basic transition animations using CSS.

CSS Transition

The CSS Transition property is used to add some interesting transition effects. A transition occurs when a property changes from one value to another value in a given period of time.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program
Here's How to Land a Top Software Developer Job

The transition effect occurs when the user hovers over an element.


transition-property: none|all|property|initial|inherit;

There are four properties in transition:

  1. transition-property: It specifies the CSS properties for which the transition effect should be applied.
  2. transition-delay: It specifies the length of time to delay the start of a transition.
  3. transition-duration: It specifies the time that should elapse for a transition effect to be complete. 
  4. transition-timing function: It specifies the speed of transition. 

CSS Transition Example 1


Here, when you hover over the element, the width changes from 100px to 500px.

1s (second) is the duration over which the transition will occur.


Become a Certified UI UX Expert in Just 5 Months!

UMass Amherst UI UX BootcampExplore Program
Become a Certified UI UX Expert in Just 5 Months!

CSS Transition Example 2


The transform property in the CSS allows you to rotate, scale, skew or translate an element. In this example, the element will rotate to 160 degrees when hovered over.


Browser Support











Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details! 


In this article, you explored various effects you can add with CSS transitions. You can use CSS transitions and advanced CSS in many ways on your page to create a better user experience.  

If you want to extend your learning and gain a more comprehensive and applied understanding of Full Stack Development, you should check out Simplilearn’s Postgraduate Program in Full Stack Web Development course, in collaboration with Caltech CTME. In this course, you'll master the skills required to be a full-stack technologist.

If you have feedback for us or queries relating to this CSS Transition tutorial, feel free to write to us in the comments section of this page (you can locate it towards the bottom of this page). Our subject matter experts will promptly review them and revert with resolutions, as soon as possible.

Happy learning!

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.