web-dev-qa-db-ja.com

CSS3を使用したテキストの色の変化のアニメーションのループ

アニメーション化するテキストがあります。たとえば、ホバリングではなく、白から赤にゆっくりと変化し、その後再び白に戻ります。

これまでの私の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;
}
csscss3transitioncss-animations
14
Alex Jj

keyframesおよび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; }
}

[〜＃〜] demo [〜＃〜]

30
Sourabh

別の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;
  }
}

参照： https://codepen.io/raaasin/pen/quvHr

1
Omar Mughrabi