Use CSS3 transitions property to create smooth change from one state to another
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
|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-durationGive 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)
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-functionGive it a TRY! »
CSS3 Transition: Introducing a Delay in Transition
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-delayGive it a TRY! » Note: Seperate transition delay for different properties are seperated by commas
CSS3 Transition: Reverse Transition
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 transitionGive it a TRY! »
CSS3 Transition Shorthand
1.You can set mutliple transition properties in a single declaration using Transition shorthand transition