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;
  }
}

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используя код Резы, я смог немного изменить «.content div», изменив «animation:shine 2.5s infinity;» на "animation:shine 2.5s 1;" и "left" на "-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/

Другие вопросы по теме