CSS - Transitions

CSS3 Transitions

CSS3 used to handle the animation speed with CSS3 properties,Using with transition, we can add effects and run effects

CSS3 transition properties

Some of the common properties which is used to transition in CSS

Values	Description
transition	Used to add four transition property into one property
transition-delay	Used to make some delay while using transition
transition-duration	Used to find,How many seconds/milli seconds are taking place to run animations
transition-property	used to specifies the property name
transition-timing-function	Used to specifies the time function to do run transition

<html>
   <head>
      <style>
         div {
            width: 100px;
            height: 100px;
            background: pink;
            -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
            transition: width 2s;
         }

         div:hover {
            width: 300px;
            height: 300px;
            -webkit-transform: rotate(180deg); /* Safari */
            transform: rotate(180deg);
         }
         #div1 {-webkit-transition-timing-function: linear;}
         #div2 {-webkit-transition-timing-function: ease;}
         #div3 {-webkit-transition-timing-function: ease-in;}
         #div4 {-webkit-transition-timing-function: ease-out;}
         #div5 {-webkit-transition-timing-function: ease-in-out;}

         /* Standard syntax */
            #div1 {transition-timing-function: linear;}
            #div2 {transition-timing-function: ease;}
            #div3 {transition-timing-function: ease-in;}
            #div4 {transition-timing-function: ease-out;}
            #div5 {transition-timing-function: ease-in-out;}
      </style>
   </head>

   <body>
      <div id="div1">linear</div><br>
      <div id="div2">ease</div><br>
      <div id="div3">ease-in</div><br>
      <div id="div4">ease-out</div><br>
      <div id="div5">ease-in-out</div><br>
   </body>
</html>

It will produce the following result −

Print Page