CSS3 Transitions

Transition effects can be applied to a wide variety of CSS properties such as (background-color, width, height, opacity etc).

Transition allow us to change from one property value to another value over a given duration.

  • transition-property specifies the property to be transitioned
  • transition-duration specifies the duration over which transitions should occur
  • transition-timing-function specifies how the peace of the transition changes over its duration
  • transition-delay specifies a delay in seconds for the transition effect

The transition-property

In the code below the div element has a width of 50 px and a height of 30 px. The background is orange. The transition effect for the width property is set to 3 seconds.

#div1 {
   width: 50px;
   height: 30px;
   background: orange;
   transition: width 3s;
}
#div1:hover {
   width: 250px;
}

The output:

When you move the cursor over the element the width of the element will become 250 px during a 3 second period of time. When the cursor is moved out of the div element the width goes back to its original dimension of 50 px.

The transition-timing-function

The transition-timing-function property specified the speed of the transition effect.
It can have the following values:

  • ease – slowly → quickly animation (ease is also the default value if no timing-function is specified
  • ease-in – slowly → accelerates → stops abruptly animation
  • ease-out – quickly → decelerates → stop
  • ease-in-out – similar to ease, but with more subtle acceleration and deceleration
  • linear – constant speed throughout the animation
  • cubic-bezier() – allows you to define your own values (from 0 to 1) in the cubic-bezier function

Leave a Reply