Make objects animate : CSS transition Property

Well, you must already know that CSS now has transition and animation property with it in its new version 3.Here, today we will understand the concept of how easily we can understand the CSS transition property.

All the modern browsers supports transitions. Before moving for examples and functionality, let we see which browses till now supports CSS transition property.

Name of the Browser	Supportive browser version	Supportive transition properties
Google Chrome	26.0 4.0 –Webkit-	All
Mozilla Firefox	16.0 4.0 –Moz-	All
Microsoft Edge	10.0	All
Apple Safari	6.1 3.1 -Webkit-	All
Opera	12.1 10.5 -O-	All

Here 'ALL' means all the transition properties like delay, duration, property and timing function.Now a days all the modern browsers support transitions.

See the below example.On hovering the mouse over the text changes its colour.
Hover On Me!

Its because we have set transition property to that element in normal CSS like below.

.element{
    transition:colour 1s; /*standard syntax*/
    -webkit-transition:colour 1s; /*For webkit browsers*/
    -o-transition:colour 1s; /*For Mozilla browser*/
}

.element:hover{
    colour:red;
}

 There are total 4 properties in transition.Transition-delay, transition-property, transition-duration and  transition-timing-function.In which, transition property and transition duration are most important a without them the transition cannot work.Combining all into single, we can do it with just transition property, which is the shorthand of them all.

• Transition-property

In the main element, you need to set the transition property means to which CSS property does the transition will happen.Note that all the CSS properties do not support the transitions property.The syntax for transition property is-

transition-property:value;

The supported transition values are- none, all, initial , inherit or any property to which the transition will occur. Separate the different properties with comma.The default value is none.So if this property is not mentioned, the transition will not occur.

• Transition-duration

If we specify through transition-property that the transition will happen a particular property, then the next question is about time.For how much time should the transition should be kept on going? Therefore, we use property- transition-duration.

The accepted value in transition-duration is a time in seconds greater than 0(of course).The default value is 0s. So if you didn't put this property, the the changes will happen in no-time.

• Transition-timing-function

Transition-timing-function specifies the speed curve of the transition.

transition-timing-function: value;

The following values can be inserted in value.The following transition timing functions specify the transition effect- 

1.ease - Slow start, then fast, then end slowly (this is default)

2.linear - Same speed from start to end

3.ease-in - Slow start

4.ease-out - Slow end

5.ease-in-out - Slow start and end

6.cubic-bezier(n,n,n,n) -Define your own values in a cubic-bezier function

• Transition-delay

Want to start your transition after 1s, 2s  5s or even 10s or more? And the good news is you don't even need here a bit of JavaScript to do this(Just cuz CSS is Awesome!).

With Transition-delay, specify the time so that the transition will start after that.It is again a numerical value in seconds grater than 0 and the default value is 0.

Using Shorthand property 'transition'

As said above, transition is a shorthand property you cab use instead of all the other properties.

Which means instead of all this-

.elm{
    transition-property: height;
    transition-duration: 5s;
    transition-timing-function:linear;
    transition-delay: 1s;
}

You can make it this simple!-

.elm{
    transition:height 5s linear 1s;
}

Here you need to note that all the properties should be in this order-

transition:transition-property|transition-duration| transition-timing-function:linear|transition-delay;

So this was a simple article about CSS transtion Property.If you like it then do like our fb page.

• Tweet
• Share
• Share
• Share
• Share