当サイトはエックスサーバーを利用しています お得な友達紹介特典を見る

CSSでなめらかに点滅させる方法(コピペOK)

アイキャッチ/点滅 テーマ共通
テーマ共通
記事内に広告が含まれています
スポンサーリンク

この記事では、CSSを使って要素をなめらかに点滅させる方法を紹介します。

ウェブデザインで使うアニメーションの中でも、要素を点滅させる効果は注目を引きたい時に便利です。当サイトの場合、トップページに表示した検索フォーム上の文字を点滅させるためにこのカスタマイズを導入しています。

ゆっくりなめらかに点滅するイメージです

このように文字を点滅させたい方は読み進めてくださいね。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー38
  • 有料記事、累計190件購入いただいています
はっちゃん
です
プロフィール

点滅の実装方法

  1. スタイルシートにCSSを記述する
  2. HTML要素にクラスを追加する

手順はこれだけ。

当カスタマイズではCSSを使用します。

テーマは関係なく使えますが、Cocoonでの編集方法についてはこちらをご確認の上作業をおこなってください。基本的に子テーマのスタイルシートを使用します。

スポンサーリンク

下記、CSSをスタイルシートに記述します。

このコードは、@keyframesを使用してアニメーションを定義して要素に適用します。ここでは「blink」という任意のクラス名をつけています。

/* 点滅 */
@keyframes blinking {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* 要素にアニメーションを適用 */
.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}

点滅する仕組みを知りたい方向けに、さくっと解説しています。

スポンサーリンク

HTML要素にクラスを追加する

点滅させたいHTML要素にクラス(ここではblink)を追加します。クラスを追加する方法は2通りあります。

  1. ブロックエディタの「追加CSSクラス」に入力する
  2. HTMLコードを直接入力する

①ブロックエディタの「追加CSSクラス」に入力する

簡単なのが、ブロックエディタの「追加CSSクラス」に入力する方法。

点滅させる要素(ブロック)を選択し、右側サイドメニューの、高度な設定→「追加CSSクラス」にクラスを入力します。今回の例では「blink」と入力。

覚えておくと便利

ブロックエディタの「追加CSSクラス」は段落全体にクラスを追加する場合に使用できます。(部分的な文字にクラスを追加するには②のHTMH直接入力を使用しましょう)

②HTMLコードを直接入力する

もうひとつは、直接HTMLを記述する方法。

  • 投稿編集画面でブロックメニューから「カスタムHTML」を選択する
  • 点滅させたい要素にクラスを追加

例えば、段落の場合は以下のようにHTMLを記述します。

<p class="blink">この部分の文字を点滅</p>
  • <p>タグの中、class="blink" を追加
  • pとの間は半角スペースで区切る

プレビューで点滅するのが確認できたら、記事を保存して完成です!お疲れさまでした。

スポンサーリンク

点滅する仕組み/CSSアニメーションの設定

CSSを使って要素をなめらかに点滅させるには、@keyframesでアニメーションを定義し、それを特定のクラスに適用することで実現できます。2つの設定が必要です。

  1. @keyframes
    • アニメーション開始時の状態と終了時の状態を設定する
  2. animation
    • 要素にアニメーションを適用する

@keyframesについて

@keyframesはアニメーションの開始から終了までに、どのような動きをさせるのかを指定します。@keyframesのあとに任意の名前(この例ではblinking)を書き、animationプロパティに紐付けます。

アニメーションの開始を「0%」、終了を「100%」とした場合のプロパティの変化を下記のように記載します。

@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
  • 0% {opacity: 0;}
    • アニメーションの開始時点(0%)で要素の透明度(opacity)を0に設定します。これは完全に透明な状態を意味します。
  • 100% {opacity: 1;}
    • アニメーションの終了時点(100%)で要素の透明度を1に設定します。これは完全に不透明な状態を意味します。

animationプロパティ

ここでアニメーションを動かす時間や繰り返しなどの詳細を設定し、要素にアニメーションを適用します。

animationプロパティの種類
  • animation-name … アニメーション名(クラス名とは別に自由に決めてOK、ここで設定した名前を最下段の@keyframesで指定して紐づけます)
  • animation-duration … アニメーション1回分の時間の長さ(初期値は「0」、単位は「秒(s)」または「ミリ秒(ms)」で指定します)
  • animation-timing-function … アニメーションの動き方(初期値は「ease」:開始と終了を滑らかに)
    • ease: デフォルト。アニメーションの開始と終了がゆっくりで、中間が速くなります。
    • linear: アニメーションが一定の速度で進行します。
    • ease-in: アニメーションの開始がゆっくりです。
    • ease-out: アニメーションの終了がゆっくりです。
    • ease-in-out: アニメーションの開始と終了がゆっくりです。
    • cubic-bezier(n,n,n,n): カスタムのベジエ曲線を定義します。
  • animation-delay … アニメーションの開始までの遅延時間を指定します。単位は秒(s)またはミリ秒(ms)です。(初期値は「0」)
  • animation-iteration-count … 繰り返す回数(初期値は「1」)
  • animation-direction … 反転再生するかどうか(初期値は「normal」)
    • normal: デフォルト。アニメーションは通常の順序で再生されます。
    • reverse: アニメーションは逆の順序で再生されます。
    • alternate: アニメーションは順方向と逆方向に交互に再生されます。
    • alternate-reverse: アニメーションは逆方向と順方向に交互に再生されます。

他にもあります。

これらのプロパティをひとつずつ書いてもよいですが、animationプロパティを使うとまとめて下記のように表記できます。

まとめるとコードも短くなりすっきりするね!

今回の点滅アニメーションの例

今回の点滅アニメーションの例でも、animationプロパティで短くまとめています。

.blink {
    animation-name: blinking; /*アニメーション名*/
    animation-duration: 1s; /*アニメーション1回分の時間の長さ*/
    animation-timing-function: ease-in-out;/*アニメーションの動き方*/
    animation-delay: 0s;/*アニメーションの開始時間*/
    animation-iteration-count: infinite;/*繰り返す回数*/
    animation-direction: alternate;/*反転再生するかどうか*/
}

.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}

このコード全体では、.blinkクラスが適用された要素が1秒かけて透明から不透明に変わり、その後また1秒かけて不透明から透明に戻るアニメーションが無限に繰り返されます。このアニメーションは滑らかに変化し、始まりと終わりがゆっくりになるように設定されています。

アニメーションの速度を調整して、理想的な点滅効果を見つけてください。

CSSアニメーションの基本的な指定方法について、こちらの記事に詳しくまとめました!

スポンサーリンク

部分的に点滅させたいとき

段落全体の他に、文章の途中で部分的な指定もできます。

一度CSSを設定しておくと、

例えば、ここを点滅させたいな!

と思ったときに投稿編集画面(カスタムHTML)でこのコードを追加するだけでいつでもどこでもピカピカ。文章の途中で改行しないで一部分だけ指定するときは<span></span>タグで囲みます。

<p>例えば、<span class="blink">ここを点滅させたいな!</span></p>

文字の他に画像も点滅できます

まったく同じ要領で、画像も点滅します。

画像を点滅させる状況はあまりないかもしれませんが、参考までに載せておきますね。

ぴかっ、ぴかっ

まとめ/点滅はピンポイントに使いましょう

イメージ画像

CSSで文字を点滅させる方法について解説しました。

今回紹介したコードをコピペしてお試しください。点滅を多用するとうるさくなってしまうので、特に目立たせたい部分にピンポイントで使うことをおすすめします。

よろしければシェアお願いします
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/
Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

タイトルとURLをコピーしました