HTML-анимация с эффектом блеска

У меня проблема с анимацией, хотелось бы чтобы переход происходил только один раз, или не был виден с обеих сторон. Текст останавливается посередине или по бокам, попытка изменить background-position тоже не сработала

 <div class = "content">
        <p> 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</p>
        </div>

 .content p{
    font-size: 20px;
    line-height: 35px;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;

}
.content p{
    background: linear-gradient(to right, white, hsl(0, 0%, 0%) 10%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2s infinite linear;

}

@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 600px;
  }
  100% {
    background-position: 600px;
  }
}