【簡単】CSSだけで要素を点滅させる。画像・枠(border)・テキストなど【animation keyframe】

2019.11.7 更新
サイトでアニメーションを実装するとなると、以前はjavascript等を使用しなければならなかったり小難しいイメージがありましたが、最近ではcssのみで簡単に実装することができます。

「CSS Animation」というもので、cssについて勉強したことがある方の中には目にした、耳にしたことがあるのではないでしょうか。

今回は「CSS Animation」を用いて、コピペでテキストや画像を点滅させる方法をご紹介します。

使いどころはあまりないかもしれませんが、知っておいて損はないかと思います。最後に使用例（？）もご紹介します！

CSSを使って要素を点滅させる

使用するのはcssのanimationプロパティと@keyframeというもの。

今回はコピペで使用できる簡単なアニメーションを紹介する記事であるため、詳しい文法や記述方法などを知りたい方は、専門的に紹介されているサイトを閲覧することをお勧めします。

デモ

@keyframesを記述する（簡単に説明）

「@keyframes」はアニメーションの開始から終了までに、どのような動きをさせるのかを指定できる文法です。
このように記述します。

@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

「blink」の部分はアニメーションのタイトルであり自由に設定できます。

0%は開始時の状態を表していて、100%が終了時の状態を表しています。25%、50%と指定を増やすこともできます。

上記では開始時にopacityプロパティ（不透明度）が0（非表示）、終了時には1（表示）という内容を記述しています。

animationプロパティを記述（簡単に説明）

animationプロパティは、@keyframesで用意した動作を要素に適用する役目を担うプロパティです。

さて点滅させる要素に設定するclassを用意します。

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

animationプロパティに先ほど用意した「blink」を指定。

後ろに記述している関連コードはオプション的なもので、ここでは開始から終了までの時間、変化する度合い、繰り返す回数等を指定することができます。

上記では、

• 開始から終了までの時間は1秒
• 緩やかに変化させる
• 無限に繰り返す

...といったことを指定しています。

あとはhtml側でclassを指定するだけ！

実装方法

CSS

はてなブログでcssを追加する場合は、編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「デザインCSS」から、サイト内のcssを編集することができます。

ここにcssをコピペしたり自分で記述することで、自身のブログに反映させることができます。

今回作成した@keyframesとanimationプロパティもここにペーストします。

HTML側でclassを指定

はてなブログの記事編集画面を例に紹介します。はてなではいくつかの記法があると思いますが、今回は「見たまま記法」での編集方法を解説していきます。

記事の編集画面を開きます。そして「HTML編集」をクリックしHTML表示にします。↓こんな感じになりますね。

さきほど作成したclass「blinking」を任意の要素に設定していきます。

デモで紹介したように画像を点滅させたい場合は、imgタグか、imgタグを囲うpタグなどにclassを設定しましょう。

記述内容

<p><img src="画像のURL" alt="" class="blinking"></p>

もしくは

<p class="blinking"><img src="画像のURL" alt=""></p>

こんな感じ。これで終了です。

応用と実用例

ボタンや枠を点滅させる

ブログ内で点滅のanimationを使用することはあまりないかもしれませんが、@keyframesを細かく指定すると色々と応用を効かせることができます。

たとえば、ボタンをこんな風に点滅させることも。

読者になる Twitter

@keyframes border {
  0% {
      border: medium solid #1D6A96;
   color:#1D6A96;
  }
  100% {
     border: medium solid #efefef;
    color:#333;
  }
}
.blinking.-type02{
    animation: border 1s ease infinite alternate;
}

お問い合わせフォームや、ランディングページのようなサイトを制作するときには役に立つかもしれませんね。

もしこれらが必要な時が来たら、この@keyframesとanimationプロパティを思い出してください。

おまけ：画像を回転させる

cssアニメーションを使えば画像を回転させたりもできます。ロード画面とかに応用できそう。

（とてもシュール）

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
.spin{
    animation: spin 3s linear infinite;
}

あわせて読みたい

ブログ-カスタマイズ/Webデザインの記事一覧へ

www.yuuu-nii.com