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.

Here, this tutorial will discuss the following - 

  • CSS Transition
  • CSS Transition Example 1
  • CSS Transition Example 2
  • Browser Support

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.

Full Stack Web Developer Course

To become an expert in MEAN StackView Course
Full Stack Web Developer Course

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

css-trans-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.

css-trans-2

FREE Java Certification Training

Learn A-Z of Java like never beforeEnroll Now
FREE Java Certification Training

CSS Transition Example 2

css-trans-3

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.

css-trans-4

Browser Support

Browser

Chrome

Firefox

Safari

Opera

Version

26.0

16.0

6.1

12.1

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!

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.