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

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

Syntax:

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!

With The Best-in-class UI UX ProgramExplore Program

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! 

Conclusion

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!