Нечеткий текст в CSS-анимации

0

Я работаю над некоторой новой анимацией в 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;
}
  • 0
    Вы используете ключевые кадры неправильно. Вы должны иметь различную анимацию, используя @-webkit-keyframes например, для каждого поставщика
  • 0
    @BeatAlex YU Не исправить также форматирование CSS?
Показать ещё 1 комментарий
Теги:
animation
scale

1 ответ

0
Лучший ответ

Добавить -webkit-font-smoothing: сглаживание; к элементу вашего анимации. Нечеткость в WebKit исходит из поведения по умолчанию, изменяющего размер шрифта от субпикселей до стандартного сглаживания при выполнении любого перехода или анимации.

  • 0
    Это происходит на -moz- и -webkit-. И все еще не работает должным образом.
  • 1
    Я нашел это: animation-iteration-count: 0.9; это была проблема. Изменено на 1 и работает правильно. Извините, что беспокою вас, ребята, спасибо в любом случае за помощь. Должен ли я сказать "тема закрыта" или что-то?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню