CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Transitions

CSS transition allows the changes in CSS property values to occur smoothly over a specified duration.

Mouse over the elements below to see different transition effects:

With Transition

CSS

CSS

CSS

CSS

Without Transition

CSS

CSS

CSS

CSS

Mouse over the image below to see a transition effect:

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

We have the following properties to set a transition:


How to Create Transition?

To create a transition effect, you must specify two things:

In the following example the box changes width from 100px to 100% and takes 1.4 seconds to complete:

Run code

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve to be used for the transition effect.

This property can have the following values:

  • ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
  • linear - specifies a transition effect with the same speed from start to end
  • ease-in - specifies a transition effect with a slow start
  • ease-out - specifies a transition effect with a slow end
  • ease-in-out - specifies a transition effect with a slow start and end
  • cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

The following example shows some of the different speed curves that can be used:

Run code

Delay the Transition Effect

The transition-delay property specifies a delay (in seconds or milliseconds) before starting a property's transition effect.

The following example has a 1 second delay before starting:

Run code

Note: A negative value will begin the transition effect immediately, and partway through the effect. In other words, the effect will be animated as if it had already been running for the given length of time.


Transition - Shorthand Property

The transition is a shorthand that sets all transition properties in a single declaration:

Syntax:
transition: property duration timing-function delay;
Run code

Change Several Property Values

The following example adds a transition effect for both the width and height property, with a duration of 1 seconds for the width and 2 seconds for the height:

Run code

Transitions Examples

Below down are some examples of transition:

The following example shows how to change multiple properties using single transition statement:

Run code

The following example shows how to use transform property with transition:

Run code

CSS Transition properties

Property Description
transition A shorthand property for setting all transition properties in single declaration
transition-delay Specifies a delay (in seconds or milliseconds) before starting a property's transition effect
transition-duration Specifies the duration over which transitions should occur
transition-property Specifies the name or names of the CSS properties to which transitions should be applied
transition-timing-function Specifies the speed curve of the transition effect