title: Transition not working on text
body: <p>I've added code to enlarge the text when it is moused over but it is not working. Can anyone see the reason why? Here is my <a href="https://jsfiddle.net/user3052443/tvxz0m2w/" rel="nofollow noreferrer">jsfiddle.</a> I don't think it matters but the font being used in the actual code is being loaded through font-face but I thought i should mention it.</p>
  
  <pre><code>    &lt;style&gt;
      .headerText {transition: all .2s ease-in-out;}
      .headerText:hover {transform: scale(2.1);}
      a.headerText {
         font-family: arial;
         font-weight:bold;
         font-style:none;
         font-size:28px; 
         text-decoration:none;
         text-align:center;  
         color:purple;
         white-space:nowrap;  
         margin-left:20px;
         line-height:1.6;   
      }
      a.headerText:hover {color:green;}
      &lt;/style&gt;
  
      &lt;span class="headerText"&gt;&lt;a class="headerText" href="http://example.com"&gt;my link&lt;/a&gt;&lt;/span&gt; 
  </code></pre>