あなたのキモチ つなげるカタチ

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

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

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

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

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

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

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

実装所要時間は10分程度

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

.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
  }
}

実装のポイント

現在制作中

この記事を書いた人(著者情報)

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク