Boucle d'Animation de changement de couleur du texte à l'aide de CSS3

J'ai le texte que je veux animer. Pas sur le vol stationnaire, par exemple, mais constamment en train de changer progressivement du blanc au rouge, puis de nouveau au blanc de nouveau.

Voici mon code CSS:

#countText{
    color: #eeeeee;
    font-family: "League Gothic", Impact, sans-serif;
    line-height: 0.9em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0px 0px 6px ;
    font-size: 210px;
}
Jetez un oeil à developer.mozilla.org/en-US/docs/Web/Guide/CSS/...
Je vous remercie beaucoup. Une bonne source.
Jj vous pouvez Vous débarrasser de la " px "ou une unité lorsque la valeur est "0". Que vous résumer à quelques octets de valeur sur un gros fichier CSS. Et conduisant '0' quand les valeurs numériques.

OriginalL'auteur Alex Jj | 2013-05-28

  1. 25

    Utilisation keyframes et animation propriété

    HTML

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

    CSS

    p{
    -webkit-animation: color-change 1s infinite;
    -moz-animation: color-change 1s infinite;
    -o-animation: color-change 1s infinite;
    -ms-animation: color-change 1s infinite;
    animation: color-change 1s infinite;
}

@-webkit-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-moz-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-ms-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-o-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}

    DÉMO

    Vous êtes les bienvenus 🙂 Vous pouvez faire beaucoup de choses cool avec animation. Lire ceci.

    OriginalL'auteur Sourabh

  2. 0

    Un Autre SampleL

    HTML:

    <div class='center'>

  <p class="awesome">ISN'T THIS AWESOME!</p>

</div>

    CSS:

     .center {

 margin: 0 auto;

 }

.awesome {

  font-family: futura;
  font-style: italic;

  width:100%;

  margin: 0 auto;
  text-align: center;

  color:#313131;
  font-size:45px;
  font-weight: bold;
  position: absolute;
  -webkit-animation:colorchange 20s infinite alternate;


}

@-webkit-keyframes colorchange {
  0% {

    color: blue;
  }

  10% {

    color: #8e44ad;
  }

  20% {

    color: #1abc9c;
  }

  30% {

    color: #d35400;
  }

  40% {

    color: blue;
  }

  50% {

    color: #34495e;
  }

  60% {

    color: blue;
  }

  70% {

    color: #2980b9;
  }
  80% {

    color: #f1c40f;
  }

  90% {

    color: #2980b9;
  }

  100% {

    color: pink;
  }
}

    ref: https://codepen.io/raaasin/pen/quvHr

    Alors que ce code lien peut répondre à la question, il est préférable d'inclure les parties essentielles de la réponse et de fournir le lien de référence. Lien-ne répond peut devenir non valide si la page liée changements.

    OriginalL'auteur Omar Mughrabi