How do I continuously do alternating colors in shimmer effect

Question

I'd like the title to have those red/orange colors in the text to alternate throughout in an infinite loop, like a range, in a loop, no slowing down. right now it's just hiding the text in a loop.

I tried to switch around with the linear gradient but couldnt figure it out On the right track: http://recordit.co/HFknq7M2TB I want those colors but infinitely and no slowing. Just continuous range from left to right.

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

Hello and welcome to SO. Please also add HTML and make a codesnippet `<>` that replicates your problem — Mihai T, Apr 19 '19 at 07:45
is this what you are looking for: https://codepen.io/anon/pen/LvmyBY ? — kukkuz, Apr 19 '19 at 09:39
I have found a SO post matching your question. The accepted answer seem to be what you are looking for : https://stackoverflow.com/questions/26176095/animate-radial-gradient-css3-move-from-left-to-right — Florian Callewaert, Apr 19 '19 at 09:58

score 1 · Answer 1 · answered Apr 19 '19 at 14:52

I appreciate all the suggestions but I was looking more towards this: This is exactly what I wanted. Perfect gradient animation. Thanks to all who helped however!

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

score 0 · Answer 2 · answered Apr 19 '19 at 10:02

I have used the background-image with red and black color to show the dynamic animation shimmer effect. Try this example:

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>

How do I continuously do alternating colors in shimmer effect

2 Answers2