CSS動畫中的模糊文字

Question

我正在處理css3中的一些新動畫，但是我遇到了字體焦點問題。一切都很好，直到動畫停止：然後文字變得模糊。 這是更好地與截圖來解釋它（效果看起來活的更差）：

Image here

這裏是代碼： 動畫代碼：

@keyframes pow { 
    0% { 
    width: 80px; 
    transform: scale(1.000, 1.000); 
    -webkit-transform: scale(1.000, 1.000); 
    -moz-transform: scale(1.000, 1.000); 
    -o-transform: scale(1.000, 1.000); 
    -ms-transform: scale(1.000, 1.000); } 
    80% { 
    width: 410px; 
    transform: scale(1.110, 1.110); 
    -webkit-transform: scale(1.110, 1.110); 
    -moz-transform: scale(1.110, 1.110); 
    -o-transform: scale(1.110, 1.110); 
    -ms-transform: scale(1.110, 1.110); } 
    100% { 
    width: 400px; 
    transform: scale(1.100, 1.100); 
    -webkit-transform: scale(1.100, 1.100); 
    -moz-transform: scale(1.00, 1.00); 
    -o-transform: scale(1.100, 1.100); 
    -ms-transform: scale(1.100, 1.100); 
    } 
} 

和CSS：

#panel { 
    max-width: 50%; 
    text-wrap: unrestricted; 
} 

#panel ul { 
    list-style-type: none; 
    text-wrap: unrestricted; 
} 

#panel > ul > li { 
    text-wrap: unrestricted; 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    border: 2px solid #FFD58A; 
    border-radius: 100px; 
    background-color: rgba(242, 204, 155, 1); 
} 

#panel > ul > li a { 
    text-decoration: none; 
    color: #000000; 
} 

#panel > ul > li p { 
    text-decoration: none; 
    text-align: left; 
    margin: 8px 45px 0px 110px; 
    font-size: 0.8em; 
} 

#panel ul li img { 
    float: left; 
    width: 100px; 
    height: 100px; 
} 

#panel > ul > li:hover { 
    margin: 0px 10px 0px 0px ; 
    -webkit-animation:pow 1s linear 1; 
    -moz-animation:pow 1s linear 1; 
    animation-fill-mode: forwards; 
    animation-duration: 4.3s; 
    animation-iteration-count: 0.9; 
    -webkit-animation-fill-mode: forwards; 
    -webkit-animation-duration: 1.3s; 
    -webkit-animation-iteration-count: 0.9; 
} 

#panel > ul > li > ul { 
    float: left; 
    display: inline-flex; 
} 

#panel > ul > li > ul > li { 
    margin: 0px 9px 0px 2px; 
    padding: 0px 5px 0px 5px; 
} 

Answer 1

添加 - webkit-font-smoothing：antialiased;你的動畫元素。 WebKit中的模糊性來自其默認行爲，在執行任何轉場或動畫時將字體大小從子像素切換到標準抗鋸齒。