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

1 コーディングテクニックの実装内容
2 コーディングテクニックの使いどころ
3 実装難易度・必要なスキル
4 実装のポイント

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

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

コーディングテクニックの使いどころ

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

実装難易度・必要なスキル

コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。

実装所要時間は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
  }
}