Shine effect html animation - html

Question

I have a problem with the animation, I would like the transition to happen only once, or not be visible on both sides. The text stops in the middle or on the sides, trying to change background-position it also did not work
<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;
}
}

Answer 1

Using Reza's code, I was able to modify slightly ".content div" by changing "animation:shine 2.5s infinite;" to "animation:shine 2.5s 1;", and "left" to "-100px".
.content {
position: relative;
overflow: hidden;
width: 600px;
}
.content p {
font-size: 20px;
line-height: 35px;
font-weight: bold;
font-family: sans-serif;
cursor: pointer;
}
.content div {
position: absolute;
top: 0;
height: 100%;
left: -100px;
width: 30%;
background: linear-gradient(to right, white, transparent 50%);
-webkit-text-fill-color: transparent;
animation: shine 2.5s 1;
overflow: hidden;
}
#keyframes shine {
0% {
left: -10%;
}
100% {
left: 110%
}
<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>
</div>
</div>
https://jsfiddle.net/jasonbruce/1gdx706t/1/