Curriculum
Course: CSS Advanced
Login

Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4
Text lesson

CSS Transitions

Mouse over the element below to observe a CSS transition effect:

This chapter covers the following CSS properties:

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

Browser Support for Transitions

The versions listed in the table indicate the initial browser versions that offer complete support for the property.

IMG_3668

How to Use CSS Transitions?

To create a transition effect, you need to define:

  • The CSS property targeted for the effect.
  • The duration of the transition.

Keep in mind: If the duration is omitted, the transition won’t occur, as the default duration is 0.

Below is an illustration of a red <div> element measuring 100px by 100px. Additionally, the <div> has been configured to exhibit a transition effect on its width property over a span of 2 seconds.

Example 

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

The transition effect initiates upon a change in the specified CSS property (width).

Next, we’ll define a new value for the width property when a user hovers over the <div> element:

Example 

div:hover {
  width: 300px;
}

Upon the cursor moving out of the element, it will smoothly transition back to its original style.

Change Several Property Values

In the following example, a transition effect is applied to both the width and height properties. The transition duration is set to 2 seconds for the width and 4 seconds for the height.

Example 

div {
  transition: width 2s, height 4s;
}

Specify the Speed Curve of the Transition

The transition-timing-function property determines the pace curve of the transition effect.

It can take the following values:

  • ease: A transition with a gradual start, accelerated middle, and gradual end (default).
  • linear: A transition with constant speed from start to end.
  • ease-in: A transition with a slow start.
  • ease-out: A transition with a slow end.
  • ease-in-out: A transition with a gradual start and end.
  • cubic-bezier(n,n,n,n): Allows custom values through a cubic-bezier function.

Below is an example illustrating different speed curves that can be applied.

Example 

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Delay the Transition Effect

The transition-delay property introduces a delay (in seconds) before the transition effect begins.

In the example below, there’s a 1-second delay before the transition initiates:

Example 

div {
  transition-delay: 1s;
}

Transition + Transformation

The subsequent example introduces a transition effect to the transformation.

Example 

div {
  transition: width 2s, height 2s, transform 2s;
}

More Transition Examples

The CSS transition properties can be individually specified, as demonstrated below:

Example 

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Alternatively, you can use the shorthand property “transition” to specify multiple transition properties at once:

Example 

div {
  transition: width 2s linear 1s;
}

 

 

Previous
Next