Monthly Archives: October 2013

How to Use CSS3 Transitions ?

  • transition:

    On this property, effect take place in an element smoothly over a given time period. Specifying duration is compulsory to see the effect. We need to specify transition-property, transition-duration, transition-timing-function and finally transition-delay.

    Web designers can easily provide beautiful effects with the help of transition withoutusing jquery.

  • Browser support: Firefox, Chrome, Opera, IE10+, and Safari. Add prefix -webkit- for chrome 25 and its earlier versions and safari.
    Add prefix -moz- for firefox.
    Add prefix -ms- for IE.

    1. Transition-properties: Lists the properties which you need to be transitioned. Some properties which can be trasitioned are border, font-size, background-color, line-height, letter spacing etc. Whole list of the properties is mentioned on the w3c website.

      Here transition property is applies to width and height.

    2. Transition-duration: This sets the time or the duration of the effect.
    3. Transition-timing-function: Six options are available in this function. Ease, ease-in, ease-out, linear, ease-in-out and cubic-bezier. By default ease is selected. You can use cubic bezier if you are looking for very fine effect. It helps you to choose your own value for the effect.
      1. Linear: Animation carries same speed from start to an end.

      2. Ease: Speed is fast in the begining and slow down at the end.

      3. Ease-out: Ease-out is quite similar to the ease. But it is slower in beginning in comparison to ease.

      4. Ease-in: Ease-in gives the smooth effect to the animation.
      5. Ease-in-out: Speed of an animation is slow in the beginning and at the end.
      6. Cubic-bezier: The function can be customized by using the values of your own.
    4. transition-delay: This function sets the time before animation begins.

      In the above example image fading starts after 2 seconds.