Css文字縮放效果彈跳回來時，徘徊

Question

所以我想讓我的網站上的標題放大懸停。我一定做錯了什麼。當我將鼠標放在文本上時，文本會放大（如果您願意，則放大），但是會再次恢復爲原始大小。

我希望它恢復到原始大小，但只有當我從文本中刪除鼠標。這應該是非常基本的，但是，我想我在這裏錯過了一些東西。

當鼠標懸停在文本上時，如何避免使文本回到原始大小？

前瞻： http://codepen.io/nine09/pen/pJWwWG

HTML：

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

CSS：

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); 
} 

Answer 1

只要更換這個，你會得到你所需要的。

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

REFFERENCE 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; 

}