Looping Animation of Text Color Change Using CSS3

Looping Animation of text color change using CSS3

Use keyframes and animation property

p {
  animation: color-change 1s infinite;
}

@keyframes color-change {
  0% { color: red; }
  50% { color: blue; }
  100% { color: red; }
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad quos autem beatae nulla in.</p>

Looping Animation of text color change in multiple elements (text) using CSS3

One observation is that in the example site you link to it appears that the colored words stay colored for a bit rather than immediately start to merge with black.

This snippet holds them colored for 30% of the animation, then quite swiftly takes them down to black at a third of the way through the animation.

The other observation is that there is a lot of repeated code here which can make it difficult to see what is going on.

This snippet gives each word the same animation but delays the second one by a third of the total animation time and the third one by two thirds.

It also uses a CSS variable for the color so the same keyframes code can be used for each word.

For clarity it also strips out the browser-specific settings - of course put them back in if required in your use case.

.center {
  margin: 0 auto;
  padding-top: 10rem;
}

.awesome {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: #313131;
  font-size: 45px;
  font-weight: bold;
  position: flex;
  --duration: 10s;
  animation: color-change var(--duration) infinite;
}

.awesome:nth-child(1) {
  --color: red;
}

.awesome:nth-child(2) {
  --color: blue;
  animation-delay: calc(var(--duration) / 3)
}

.awesome:nth-child(3) {
  --color: yellow;
  animation-delay: calc(var(--duration) * 2 / 3);
}

@keyframes color-change {
  0% {
    color: var(--color);
  }
  30% {
    color: var(--color);
  }
  33.3333% {
    color: black;
  }
  100% {
    color: black;
  }
}

<div class='center'>
  <p class="awesome">Develop</p>
  <p class="awesome">Preview</p>
  <p class="awesome">Ship</p>
</div>

How can I loop a Keyframe css color animation?

body {
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Roboto', sans-serif !important;
    position: relative;
    animation-name: color;
    animation-duration: 6s;
    animation-iteration-count:infinite; /* add this line */
}

Rainbow text animation using only CSS

You can achieve this effect by using a moving gradient background, color to transparent, and background clip to text.

#shadowBox {    background-color: rgb(0, 0, 0);    /* Fallback color */    background-color: rgba(0, 0, 0, 0.2);    /* Black w/opacity/see-through */    border: 3px solid;}
.rainbow {    text-align: center;    text-decoration: underline;    font-size: 32px;    font-family: monospace;    letter-spacing: 5px;}.rainbow_text_animated {    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);    -webkit-background-clip: text;    background-clip: text;    color: transparent;    animation: rainbow_animation 6s ease-in-out infinite;    background-size: 400% 100%;}
@keyframes rainbow_animation {    0%,100% {        background-position: 0 0;    }
    50% {        background-position: 100% 0;    }}

<div id="shadowBox">    <h3 class="rainbow rainbow_text_animated">COMING SOON</h3></div>

Font-Color change in an infinite loop

You want to be using color as font-color attribute does not exist.

Also note that the tutorial you are using works in webkit browsers but does not work with firefox! So I have added the firefox prefix in.

See http://jsfiddle.net/LDRR7/21/

    #alert {color: #39f !important;}
@-webkit-keyframes colours {
     0% {color: #39f;}
 25% {color: #8bc5d1;}
 50% {color: #f8cb4a;}
 75% {color: #8bc5d1;}
100% {color: #39f;}

}
@-moz-keyframes colours {
      0% {color: #39f;}
 25% {color: #8bc5d1;}
 50% {color: #f8cb4a;}
 75% {color: #8bc5d1;}
100% {color: #39f;}

}

#alert {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
    -moz-animation-direction: normal;
    -moz-animation-duration: 10s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: colours;
    -moz-animation-timing-function: ease;
}

css hover color transition loop

You need to use CSS animation with keyframes for an infinite loop, rather than the transition property. Here's an example:

div {
  background-color: pink;
}

div:hover {
  animation: change-color 2s infinite;
}

@keyframes change-color {
  0% {
    background-color: pink;
  }
  50% {
    background-color: yellow;
  }
}

<div>Hover me</div>

Looping Animation of Text Color Change Using CSS3