文字色や背景色、枠線などの色を変化させるCSSアニメーションサンプル集

2019-03-282020-01-09CSS アニメーション サンプル集,CSS

要素や文字の色が変化するCSSアニメーションパターンです。

サンプルでは、@keyframesの0％と100％が同一値になる場合、別けずに記述しています。

テキストの色を変化させるCSSアニメーション

テキストの色を変化させるのに@keyframesでcolorプロパティを変更しています。

See the Pen CSS Background color change animation by yochans (@yochans) on CodePen.

HTML

<p class="text">ONE NOTE</p>

CSS

.text{
  animation: color-change 2s linear infinite;
  margin:20px;
  font-size:30px;
  font-weight: bold;
}

@keyframes color-change {
  0%,100%{
	color:#ff1493;
  }

  25%{
	color:#7fff00;
  }
  
  50%{
	color:#0091EA;
  }
  
  75%{
	color:#9400d3;
  }
}

要素の背景色を変化させるCSSアニメーション

要素の背景色を変化させるのに@keyframesでbackground-colorプロパティを変更しています。

See the Pen CSS Background color change animation by yochans (@yochans) on CodePen.

HTML

<div class="box"></div>

CSS

.box{
  animation: color-change 2s linear infinite;
  margin:20px;
  width:50px;
  height:50px;
}

@keyframes color-change {
  0%,100%{
	background-color:#ff1493;
  }

  25%{
	background-color:#7fff00;
  }
  
  50%{
	background-color:#0091EA;
  }
  
  75%{
	background-color:#9400d3;
  }
}

枠線の色を変化させるCSSアニメーション

枠線の色を変化させるのに@keyframesでborder-colorプロパティを変更しています。

See the Pen CSS Border color change animation by yochans (@yochans) on CodePen.

サンプルでは下線のみのborderを表示、@keyframesで変化させています。

HTML

<p class="text">ONE NOTE</p>

CSS

.text{
  animation: color-change 2s linear infinite;
  margin:20px;
  font-size:30px;
  font-weight: bold;
  border-bottom:solid 3px #ff1493;
}

@keyframes color-change {
  0%,100%{
	border-color:#ff1493;
  }

  25%{
	border-color:#8b4513;
  }
  
  50%{
	border-color:#0091EA;
  }
  
  75%{
	border-color:#9400d3;
  }
}