Блог

Главная - Вопросы по программированию - Текст размыт до завершения анимации?

Текст размыт до завершения анимации?

#css

#css

Вопрос:

У меня текстовая анимация размыта, она выглядит некрасиво.

 .text{
  animation: move 2s ease-in;
  position: relative;
  
  /* Added for demo purpose */
  animation-iteration-count: infinite;
}

@keyframes move {
  0% {
    right: -4em;
    opacity: 0;
  }
  80% {
    right: 0.2em;
    opacity: 1;
  }
  100% {
    right: 0em;
  }
}  
 <span class="text">Text</span>

Я использую chrome!

Как я могу убрать это размытие? Спасибо!

Комментарии:

1. Пожалуйста, добавьте соответствующую информацию о вашей проблеме.

2. во время анимации текст размыт.. когда анимация завершена, отображается обычный шрифт

3. Он не размыт… Его эффект перехода от непрозрачности 0 к 1

4. как я могу сделать так, чтобы это выглядело красиво?

5. Пожалуйста, найдите ответ ниже. Надеюсь, это вам поможет.

Ответ №1:

Попробуйте это: 

 .text{
  animation: move 2s ease-in;
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden
}
@keyframes move {
  0% {
    transform: translateX(15%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}  
 <div class="text">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</div>