transition.html

   1 <?xml version="1.0" encoding="UTF-8" ?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   4 <head>
   5     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   6     <title>Hover</title>
   7     <style type="text/css">
   8         .button
   9         {
  10            -moz-border-radius: .2em;
  11            padding: .2em;
  12             -moz-transition-property: -moz-box-shadow;
  13             -moz-transition-duration: .5s;
  14            -moz-box-shadow: 0 .06em .3em rgba(0,0,0,.1);
  15            display: inline-block;
  16         }
  17
  18         .button:hover
  19         {
  20             -moz-transition-property: -moz-box-shadow;
  21             -moz-transition-duration: .5s;
  22             -moz-transition-timing-function: ease;
  23             -moz-box-shadow: 0 .15em .4em rgba(0,0,0,.5);
  24         }
  25     </style>
  26 </head>
  27 <body>
  28     <div class="button">Hover me</div>
  29 </body>
  30 </html>