在动画完成之前，文本是模糊的

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>