CSS Transitions


Transitions are used to add effects to the elements. To create transition we need to mention 2 things: the property on which the effect would be added and the time duration for which the transition will be set. Some CSS transition properties are as follows:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Note: If you miss specifying the duration, the transition function will not have any effect as the default value is set to 0.
Here is a description of all the CSS transition properties:

  • transition: It is the shorthand property that sets the four basic transition properties in a single property.
  • transition-delay: It is used for specifying a delay in the transition effect and is usually for a few seconds.
  • transition-duration: It is used for specifying the seconds or milliseconds for which a transition effect occurs.
  • transition-property: It is used for specifying the name of the CSS property for which the transition effect is applied.
  • transition-timing-function: It is used for specifying the speed curve for the transition. Here are all the properties that it can take: ease (to have a slower start for the transition, then increase its speed in between and have a slower end), linear (it keeps the speed for the transition constant), ease-in (It starts the transition slowly), ease-in-out (It makes the transition to having a slower starting and ending), and cubic-bezier (n,n,n,n) (it allows defining the unique set of values in the function).


<html> <html lang="en-US"> <style> div { width: 100px; height: 100px; background: red; transition: width 2s; } div:hover { width: 300px; } </style> </head> <body> <h1>Knowledge2life</h1> <p>Online learning website</p> <div></div> </body> </html>



Online learning website.