Search within TutorialsPark

CSS3 Transitions


Use CSS3 transitions property to create smooth change from one state to another


CSS3 Transitions

image1 image2

1. The Browser applies CSS properties to the elements immediately when triggered(using :hover, :active etc)

2. Using CSS3 transition properties you can control the rate at which CSS properties are applied when triggered.

Tables: CSS Transition Properties

Property Description Initial Value
transition-delay To set the delay after which the transition begins time(ms, s)
transition-duration To set the time duration over which the transition will be done time(ms, s)
transition-property To specify the CSS properties to which the transition is to be applied CSS Properties
transition-timing-function Specifies the pace of animation within the alloted animation duration Keywords
transition Shorthand to set multiple transition properties in a single declaration Same

A list of CSS properties which can be animated are given here


CSS3 transition: How to create a transition effect

1. Specifiy the property that the transition applies to using CSS3 transition-property

2. Set the time duration over which the CSS transitions will be performed use CSS3 transition-duration property

CSS3 Example : transition-property and transition-duration

Give it a TRY! » Note: You can set different time durations for different properties seperated by commas, and exactly in the order they appear


CSS3 Transition: Setting the Transition speed (with transition-timing-function)

linear

ease

ease-in

ease-out

ease-in-out

steps(5)

step-start

step-end

cubic-bezier(1,-0.1,0.8,1)

1.To control the rate of the animation use CSS3 transition-timing-function property

. It can take one or multiple values seperated by commas.

The values are as follows:

linear: The rate of transition remains constant from start to end

ease : The transition begins quickly and then gradually slows down

ease-in : Begins slowly and then ends then speeds up towards the end.

ease-out : The transition begins quickly and stays quick longer than ease, and then slows down and ends abruptly

ease-in-out: Accelerates in the beginning and then decelerates in the end.

cubic-bezier() : Transition is applied using a custom cubic bezier curve.

step-start : Tansition is applied at the start of the step.

step-end: Transiton is applied at the end of the step.

steps() : Change is introduced in steps specified within the brackets.

Example: CSS transition-timing-function

Give it a TRY! »


CSS3 Transition: Introducing a Delay in Transition

image4 image4

1. CSS3 transiton-delay property is used to set the time after which the transition starts (i.e it introduces a delay in transition)

Example: CSS transition-delay

Give it a TRY! » Note: Seperate transition delay for different properties are seperated by commas


CSS3 Transition: Reverse Transition

tintin Hover to See Effects

1. Transition effects require a trigger to begin(eg :hover , :focus etc) , styles are applied only when the mouse moves over the element and is removed when the mouse pointer moves out of the element.

2. When the mouse pointer is removed it immediately moves back to its original state, but you can even run the transition smoothly in reverse by defining the reverse sequence timings in the elements initial state.

Example: CSS reverse transition

Give it a TRY! »


CSS3 Transition Shorthand

1.You can set mutliple transition properties in a single declaration using Transition shorthand transition

Syntax: CSS3 Transtion shorthand

Example: CSS3 transition shorthand

Give it a TRY! » Note: Multiple transitions can be specified using commas