web-dev-qa-db-fra.com

Animation en boucle du changement de couleur du texte à l'aide de CSS3

J'ai un texte que je veux animer. Pas en vol stationnaire, par exemple, mais changeant continuellement de blanc en rouge puis redevenant blanc.

Voici mon code CSS jusqu'à présent:

#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;
}
csscss3transitioncss-animations
11
Alex Jj

Utiliser les propriétés keyframes et animation

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&EACUTE;MO

26
Sourabh

Un autre échantillon

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

0
Omar Mughrabi