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.
      .div
      { 
      border-radius:90px; 
      width:120px; 
      height:120px; 
      background:#F60;
      }
      .div:hover
      { 
      width:150px;
      height:150px;
      transition-property:width;
      -webkit-transition-property: width, height; /* Safari */
      -moz-transition-property: width, height; /* Firefox 4 */
      -o-transition-property:width, height; /* Opera */
      transition-duration: 3s;
      -webkit-transition-duration: 3s; /* Safari */
      }
      

      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.

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

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

        Ease-out
      4. Ease-in: Ease-in gives the smooth effect to the animation.
        Ease-in
      5. Ease-in-out: Speed of an animation is slow in the beginning and at the end.
        Ease-in-out
      6. Cubic-bezier: The function can be customized by using the values of your own.
        Cubic-bezier
    4. transition-delay: This function sets the time before animation begins.
      .div
      {
      position:absolute;
      left:0;
      opacity: 1;
      transition: opacity 2s ease-in 2s;
      -o-transition: opacity 2s ease-in  2s;
      -webkit-transition: opacity 2s ease-in 2s;
      -moz-transition: opacity 2s ease-in 2s;
      -ms-transition: opacity 2s ease-in 2s;				
      }
      

      In the above example image fading starts after 2 seconds.

Share