Я работаю над некоторой новой анимацией в css3, но у меня проблема с фокусом шрифта. Все идет хорошо, пока анимация не прекратится: тогда текст становится нечетким. Лучше объяснить это с помощью скриншотов (эффект выглядит хуже вживую):
Здесь код: код анимации:
@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;
}
Добавить -webkit-font-smoothing: сглаживание; к элементу вашего анимации. Нечеткость в WebKit исходит из поведения по умолчанию, изменяющего размер шрифта от субпикселей до стандартного сглаживания при выполнении любого перехода или анимации.
@-webkit-keyframes
например, для каждого поставщика