Transitions

by Petra1999

HTML

<div id="short">basic short code</div>
<div id="long">basic long code</div>
<br>
<div id="transform">with transform</div>
<br>
<div id="in">just in</div>
<div id="out">just out</div>
<br>
<div id="bgleft">bg slide-in</div>
<div id="bgtrans">bg slide-in (with transition)</div>
<br>
<div id="borderleft">border slide-in</div>
<div id="bordercenter">border slide-in (from center)</div>
<div id="borderdown">border slide-down</div>
<div id="borderup">border slide-up</div>
<br><br>
<ul>
<li>made by <a href="http://cloudythms.tumblr.com/">cloudythms</a></li>
<li>other cool underline effects:
  <a href="https://codepen.io/rm/pen/ldhon" target="_blank">one</a>
  <a href="https://codepen.io/ShayStibelman/pen/reJLy" target="_blank">two</a>   
</li>
</ul>

CSS

#short {
  
  /* property duration timing-function delay */
  -webkit-transition: all 0.5s linear 0.2s;
     -moz-transition: all 0.5s linear 0.2s;
      -ms-transition: all 0.5s linear 0.2s;
       -o-transition: all 0.5s linear 0.2s;
          transition: all 0.5s linear 0.2s;
          
  /* with multiple properties: 
  transition: property1 0.5s linear 0.2s,
              property2 0.5s linear 0.2s; */
          
}

#long {
  
  /* none, all or
  specific properties (like width, height) seperated by comma */
  -webkit-transition-property:all;
     -moz-transition-property:all;
      -ms-transition-property:all;
       -o-transition-property:all;
          transition-property:all;
          
  /* in seconds (s) or milliseconds (ms) */
  -webkit-transition-duration:0.5s; 
     -moz-transition-duration:0.5s;
      -ms-transition-duration:0.5s;
       -o-transition-duration:0.5s;
          transition-duration:0.5s;
         
  /* linear, ease, ease-in, ease-out, ease-in-out */
  -webkit-transition-timing-function:linear; 
     -moz-transition-timing-function:linear;
      -ms-transition-timing-function:linear;
       -o-transition-timing-function:linear;
          transition-timing-function:linear;
         
  /* in seconds (s) or milliseconds (ms) */
  -webkit-transition-delay:0.2s;
     -moz-transition-delay:0.2s;
      -ms-transition-delay:0.2s;
       -o-transition-delay:0.2s;
          transition-delay:0.2s;
}



/* ------------- */




#transform {
  
  -webkit-transition: all 2s, transform 1s;
     -moz-transition: all 2s, transform 1s;
      -ms-transition: all 2s, transform 1s;
       -o-transition: all 2s, transform 1s;
          transition: all 2s, transform 1s;

}

#transform:hover {
  
  -webkit-transform: rotate(5deg);
     -moz-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
       -o-transform: rotate(5deg);
          transform: rotate(5deg);
    
}



/* ------------- */



#in {
  -webkit-transition: none;
     -moz-transition:...