css - 在动画完成之前文本是模糊的？

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>

我用的是 chrome!

我怎样才能让那个模糊消失？谢谢!

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>