Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

CSS3 Transition

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

    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


    Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

    Are You Starting A New Blog
    Do You Want Best Web Hosting?

    Try World's Best Web Hosting Provider BlueHost
    At Just $3.95/mo

    Hurry Up! Limited Time Offer

    Yes, I Want To Check Out BlueHost

    Check The World's Best SEO And All-In-One Marketing Toolkit
    For Digital Marketing Professionals SEMRUSH

    Check Out SEMRUSH