✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

CSS3 Transition

CSS3 Transition is used to give effects to element when changing its style from one color to another.


CSS3 Transition has four properties

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

    • You can set all the four properties in one like:


    transition:transition-property, transition-duration, transition-timing-function, transition-delay;

    Example of Transition

    a:link
{
transition:all .2s linear 0;
}

    Note:transition-duration property is very important without this the transition will produce no effect

    You can set the transition properties independently


    transition-property: all;
    transition-duration: 3s;
    transition-timing-function: linear;
    transition-delay: 2s;

    All CSS3 Transition Properties

    • transition:is used to set all the four transition properties combined.

    • transition-propertyis used to set the name of the css property the transition effect is for

    • transition-durationis used to specify how much time it takes to complete the effect

    • transition-timing-functionis used for speed curve of the transition effect

    • transition-delayis used to specify starting of the effect

    ❮ PrevNext ❯