CSS Transition

The CSS transitions are effects that are added to change the element gradually from one style to another, without using flash or JavaScript.

You should specify two things to create CSS transition.

  • The CSS property on which you want to add an effect.
  • The time duration of the effect.

Let’s take an example which defines transition effect on width property and duration of 3 seconds.

Note: If you don’t specify the duration part, the transition will have no effect because its default value is 0. The transition effect is started when you move cursor over an element.

Note: The transition property is not supported by IE9 and earlier version.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>   
  5. div{  
  6.     width: 100px;  
  7.     height: 100px;  
  8.     background: orange;  
  9.     -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */  
  10.     transition: width 1s;  
  11. }  
  12. div:hover {  
  13.     width: 300px;  
  14. }  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div></div>  
  19. <p>Move the cursor over the div element above, to see the transition effect.</p>  
  20. </body>  
  21. </html>  

Test it Now

Note: When you take mouse cursor out of the element, it gains its original style gradually.

CSS Multiple Transition Effect

It is used to add transition effect for more than one CSS property. If you want to add transition effect on more than one property, separate those properties with a comma.

Let’s take an example. Here, the transition effects on width, height and transformation.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>   
  5. div {  
  6.     padding:15px;  
  7.     width: 150px;  
  8.     height: 100px;  
  9.     background: violet;  
  10.     -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */  
  11.     transition: width 2s, height 2s, transform 2s;  
  12. }  
  13. div:hover {  
  14.     width: 300px;  
  15.     height: 200px;  
  16.     -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */  
  17.     transform: rotate(360deg);  
  18. }  
  19. </style>  
  20. </head>  
  21. <body>  
  22. <div><b>JavaTpoint.com</b><p> (Move your cursor on me to see the effect)</p></div>  
  23. </body>  
  24. </html>  

Was this article helpful?

Related Articles

Leave A Comment?