I have an text animation and is blurry, it looks ugly.

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

I use chrome!

How can I make that blur gone? Thank you!

1 Answers

0
Joykal Infotech On

Try this:

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