title: CSS Transition and Transform Not Working in Safari 5.1.7
body: <p>I am having a problem getting a underline bar to animate under a text link. You can see a working example here: <a href="http://tobiasahlin.com/blog/css-trick-animating-link-underlines/" rel="nofollow noreferrer">http://tobiasahlin.com/blog/css-trick-animating-link-underlines/</a></p>
  
  <p>The animation works fine in all browsers except for Safari 5.1.7. What am I doing wrong? Here is my code snippet:</p>
  
  <p>EDIT: Sorry about that, I added the html and more of the CSS rules. I hope that helps.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.infiniteNav{
   width: 100%;
   height: 56px;
   background-color: #9e0707;
   background: linear-gradient(#c71e1e, #800909);
   background: -webkit-linear-gradient(#c71e1e, #800909);
   position: absolute;
   top: 271px;
   z-index: -2;
  }
  
  nav{
   width: 955px;
   height: 56px;
   float: left;
   text-align: center;
   display: block;
   background-color: #9e0707;
   background: linear-gradient( #c71e1e, #800909);
   background: -webkit-linear-gradient(#c71e1e, #800909);
  }
  
  nav a{
   position: relative;
   font-size: 25px;
   font-family: arial;
   color: #e0e0e0;
   text-decoration: none;
   font-weight: bold;
   margin: 0px 15px;
   line-height: 55px;
  }
  
  /********************************************************************************************************
  This is the animated underline bar.                  *
  ********************************************************************************************************/
  
  nav a:before{
   content: "";
   position: absolute;
   width: 100%;
   height: 2px;
   bottom: 0;
   left: 0;
   background-color: #e0e0e0;
   visibility: hidden;
   -webkit-transform: scaleX(0);
   transform: scaleX(0);
   /*-webkit-transition: all 0.3s ease-in-out 0s;*/
   -webkit-transition-property: all;
   -webkit-transition-duration: 0.3s;
   -webkit-transition-timing-function: ease-in-out;
   -webkit-transition-delay: 0s;
   transition: all 0.3s ease-in-out 0s;
  }
  
  nav a:hover:before{
   visibility: visible;
   -webkit-transform: scaleX(1);
   transform: scaleX(1);
   color: #e0e0e0;
  }
  
  nav a:active{
   color: #e0e0e0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
      &lt;a href="index.html"&gt;Home&lt;/a&gt;
      &lt;a href="shop.html"&gt;Shop&lt;/a&gt;
      &lt;a href="sales.html"&gt;Sales&lt;/a&gt;
      &lt;a href="catalog.html"&gt;Catalog&lt;/a&gt;
      &lt;a href="events.html"&gt;Events&lt;/a&gt;
      &lt;a href="contact.html"&gt;Contact&lt;/a&gt;
      &lt;a href="aboutus.html"&gt;About us&lt;/a&gt;
      &lt;a href="partners.html"&gt;Partners&lt;/a&gt;
     &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>