Текст размыт, пока анимация не закончена?

Question

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

.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>

Я использую хром!

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

Answer 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>