【CSS】色々なパターンの点滅するCSSアニメーション

2019年4月11日CSS

色々なパターンの点滅CSSアニメーション

HTML(共通)

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

通常点滅パターン

シンプルなフラッシュパターンです

See the Pen CSS Flash animation 1 by yochans (@yochans) on CodePen.

CSS

.box{
  animation: flash 1s linear infinite;
  width:50px;
  height:50px;
  background:#0091EA;
  margin:20px;
}

@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

高速点滅パターン

単純にCSSアニメーション時間を短くしたパターンです

See the Pen CSS Flash animation 2 by yochans (@yochans) on CodePen.

CSS

.box{
  animation: flash 0.3s linear infinite;
  width:50px;
  height:50px;
  background:#0091EA;
  margin:20px;
}
@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

シャープな点滅パターン

フラッシュするタイミングをシャープにした感じの点滅アニメーションパターンです

See the Pen CSS Flash animation 3 by yochans (@yochans) on CodePen.

CSS

.box{
  animation: flash 1s linear infinite;
  width:50px;
  height:50px;
  background:#0091EA;
  margin:20px;
}
@keyframes flash {
  0%,50%,100%{
    opacity: 0;
  }

  35%{
    opacity: 1;
    background:#7fff00;
  }
  
  65%{
    opacity: 1;
    background:#0091EA;
  }
}

交互に色を変えて点滅するパターン

交互に設定した2色を入れ替えて点滅させるCSSアニメーションパターンです

See the Pen CSS Flash animation 3 by yochans (@yochans) on CodePen.

CSS

.box{
  animation: flash 1s linear infinite;
  width:50px;
  height:50px;
  background:#0091EA;
  margin:20px;
}
@keyframes flash {
  0%,50%,100%{
    opacity: 0;
  }

  35%{
    opacity: 1;
    background:#7fff00;
  }
  
  65%{
    opacity: 1;
    background:#0091EA;
  }
}

複数の色に変えて点滅するパターン

複数の設定した色を入れ替えて点滅させるCSSアニメーションパターンです

See the Pen CSS Flash animation 5 by yochans (@yochans) on CodePen.

CSS

.box{
  animation: flash 1s linear infinite;
  width:50px;
  height:50px;
  background:#0091EA;
  margin:20px;
}
@keyframes flash {
  0%,35%,60%,100%{
    opacity: 0;
  }

  25%{
    opacity: 1;
    background:#7fff00;
  }
  
  50%{
    opacity: 1;
    background:#0091EA;
  }
  
  75%{
    opacity: 1;
    background:#ff1493;
  }
}

文字色を変えて点滅するパターン

複数の設定した色を入れ替えて点滅させるCSSアニメーションパターンです

See the Pen CSS Flash animation 6 by yochans (@yochans) on CodePen.

CSS

.link{
  margin:10px 0;
}

.text{
  animation: flash 1s linear infinite;
  margin:20px;
  font-size:30px;
	font-weight: bold;
}

@keyframes flash {
  0%,35%,60%,100%{
    opacity: 0;
  }

  25%{
    opacity: 1;
    color:#7fff00;
  }
  
  50%{
    opacity: 1;
    color:#0091EA;
  }
  
  75%{
    opacity: 1;
    color:#ff1493;
  }
  
}

2019年4月11日CSSCSSアニメーション

Posted by ヨウスケ