悬停时CSS文本缩放效果回弹

Question

所以我试图让网站上的标题在悬停时放大。我一定做错了什么。当我将鼠标悬停在文本上时，文本会被放大（或放大，如果你愿意的话），但随后又会恢复到原始大小。

我希望它恢复到原始大小，但只有当我从文本中移开鼠标时。这应该是非常基本的，但我想我在这里遗漏了一些东西。

当鼠标悬停在文本上时，如何避免使文本恢复到原始大小？

    h1, h2, h3, h4, h5, h6 {
      clear: both;
      font-family: 'Oswald', sans-serif;
      font-weight: 400;
      line-height: 1.2;
      margin-bottom: 3%;
    }
    
    h1 {
      font-size: 50px; /*Originally 50px*/
    }
    
    .entry-title {
      font-family: 'Oswald', sans-serif;
      font-size: 43px; /*Originally 80px*/
      font-weight: 700;
      letter-spacing: -1px;
      line-height: 1.1;
      margin-bottom: 0%;
    }
    @media (max-width: 768px) {
      .entry-title {
        font-size: 50px;
        margin-bottom: 20px;
      }
    }
    .entry-title a {
      font-family: 'Oswald', sans-serif;
      color: #404040;
      text-decoration: none;
      -moz-transition:-moz-transform 0.2s ease-in; 
      -webkit-transition:-webkit-transform 0.2s ease-in; 
      -o-transition:-o-transform 0.2s ease-in;
      -moz-transition:-moz-transform 0.2s ease-out; 
      -webkit-transition:-webkit-transform 0.2s ease-out; 
      -o-transition:-o-transform 0.2s ease-out;
    }
    .entry-title a:hover {
      font-family: 'Oswald', sans-serif;
      color: #000000;
      text-shadow:1px 0px #555;
      -moz-transform:scale(1.03); 
      -webkit-transform:scale(1.03);
      -o-transform:scale(1.03);
    }

    <h1 class="entry-title">
    <a href="http://www.google.com" rel="bookmark">This is a sample text</a>
    </h1>

Answer 1

只需更换这个，你就会得到你需要的。

.entry-title a {
  font-family: 'Oswald', sans-serif;
  color: #404040;
  display: inline-block;
  transition: all .5s ease;
}

参考Link

Answer 2

试试这个fiddle。

a {
  font - size: 18 px
  font - family: 'Oswald', sans - serif;
  color: #404040;
  text-decoration: none;
  -webkit-transition: color 2s, font-size 2s;
  -moz-transition: color 2s, font-size 2s;
  -o-transition: color 2s, font-size 2s;
  transition: color 2s, font-size 2s;
}
a:hover {
  font-size: 45px;

}