【CSS】@keyframesを使用してテキストをチカチカと点滅アニメーションさせる方法

コーディングテクニックの実装内容

今回はテキストアニメーションに関する内容です。@keyframesを使用してテキストをチカチカと点滅アニメーションさせる方法をご紹介します。JavaScriptは不使用なので簡単に実装できます。

使いどころ

見出しのテキストやタイトルなどに使用すると効果的です。カーテンアニメーションの中に組み込むのも効果的です。

実装所要時間:10分程度
難易度:初心者コーダーでも実装可能

>> DEMOはこちらから！（View Demo）

実装に必要なスクリプトとスタイルはこちらになります。

.wrap {
  margin: 80px 0 0;
}
.text {
  text-align: center;
  font-size: 62px;
  font-weight: bold;
  transition: opacity 0s linear .8s;
  animation: text 0.1s linear .8s 10 normal;
  opacity: 1;
}

@keyframes text {
  0% {
      opacity: 0
  }

  50% {
      opacity: 1
  }

  100% {
      opacity: 0
  }
}

実装のポイント

現在制作中

>> DEMOはこちらから！（View Demo）