Как мне постоянно делать чередующиеся цвета с эффектом мерцания

Question

Мне бы хотелось, чтобы заголовок имел те красные / оранжевые цвета в тексте, которые чередуются в бесконечном цикле, например, в диапазоне, в цикле, без замедления.сейчас он просто скрывает текст в цикле.

Я пытался переключиться с помощью линейного градиента, но не мог понять это. На правильном пути: http://recordit.co/HFknq7M2TB Я хочу эти цвета, но бесконечно, и нетзамедление.Просто непрерывный диапазон слева направо.

.landtitlep {
margin-bottom: 5%;

background: linear-gradient(to right, #ff6600 10%, #800000 70%, #cc0000 100%);


-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 10vw;
font-family: "Poppins", sans-serif;

text-align: center;







background-clip: text;
animation-name: shimmer;
animation-duration: 7s;
animation-iteration-count: infinite;
animation: shimmer 7s infinite;
/*background-repeat: no-repeat;*/





        text-align: center;



    background-size: 70% 100%;

    background-clip: text;

    animation-name: shimmer;

    animation-duration: 2s;

    animation-iteration-count: infinite;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: linear-gradient(to right, #ff6600 10%, #800000 70%, #cc0000 100%);


}


@keyframes shimmer {
0% {
    background-position: top left;
}

100% {
    background-position:  top right;
}
}

Answer 1

Я ценю все предложения, но я больше смотрю на это: Это именно то, что я хотел. Идеальная градиентная анимация. Спасибо всем, кто помог, однако!

.landtitlep {
    margin-bottom: 5%;

    background: linear-gradient(to right, #ff6600 10%, #800000 70%, #cc0000 100%);

    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 10vw;
    font-family: "Poppins", sans-serif;

    text-align: center;




      color: #000;




  text-align: center;

  background: -webkit-linear-gradient(right, #ff6600 0%, #800000 25%, #cc0000 50%, yellow 100%) repeat;
  -webkit-background-clip: text;
  -ms-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -ms-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-animation-name: shimmer;
  -webkit-animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;








}


@keyframes shimmer {
    0% {
        background-position: 0,0;
    }

    100% {
       background-position: 8000px 3000px;
    }
}

Answer 2

Я использовал background-image с красным и черным цветом, чтобы показать эффект мерцания динамической анимации.Попробуйте этот пример:

span {
    font-size: 4em;
    letter-spacing: 0;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
    background: url(https://i.stack.imgur.com/6AqCS.jpg) repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 30s linear infinite;
    -webkit-animation: shimmer 30s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    animation-direction: normal;
}

@-webkit-keyframes shimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

<span>Hello World!</span>