✖

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 ❯