【はてなブログ】枠やいろいろなものを点滅させる方法

f:id:sunko-chan:20210720173449p:plain

前回の【はてなブログ】いろいろなタイトル付き枠の作り方
一緒に記事にしようと思ったのですが、思いのほか長くなってしまったので
別記事にしてみました。

こんな枠もできるよって言うのを紹介していきます。

枠を点滅させる

CSS Animationと言うものを使って枠を点滅させてみましょう。

枠と文字が点滅するよ。

こんな感じのやつです。

目がチカチカして見にくいし、正直使いどころあるのかなって感じですけど。

以下のコードを貼り付ければできます。

<style>
@keyframes tenten{
    0% {opacity:0;}
    100% {opacity:1;}
}  

.tenmetsu{
    animation:tenten 1s ease-in-out infinite alternate;
}
  
</style><div class="tenmetsu"
 style="display:inline-block;
 background:#ffffff;
 padding:10px; border:3px double #fc4a1a;">ここに文章
</div>

<style></style>というのが出てきました。
これはCSSを記事内で使うときの構文です。

それでは<style></style>の中を見ていきましょう。

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

@keyframeはどのようなアニメーションをするかの設定です。
@keyframes tentenのtentenの部分はこのアニメーションのタイトルで
任意に設定できます。

0%は開始時の状態、100%が終了時の状態です。
0%はfrom、100%はtoでも大丈夫です。
また%は細かく設定することもできます。

opacityは透明度の設定です。
0で透明、1で不透明になります。

なので、ここでは徐々に表示される感じになります。

.tenmetsu{
    animation:tenten 1s ease-in-out infinite alternate;
}

.tenmetsuはここで設定したアニメーション動作のタイトルです。
これも任意に設定できます。

animationは、@keyframesで設定したアニメーションを
どのように動作させるかの設定です。

animationをどのように設定するかはあとで説明します。
とりあえず、今回の設定を見ていきましょう。

まずは@keyframesで設定したタイトルと同じものを設定します。
今回の場合はtentenですね。

次にアニメーションの時間を設定します。
s(秒)とms(ミリ秒)で設定できます。
msは1000分の1sです。

ease-in-outはアニメーションの変化の度合いです。
どんな感じでアニメーションしていくかってことですね。

他にも以下のようなものがあります。

ease 最初と最後を緩やかにする。
ease-in 最初は緩やかで、最後になるにつれ早くなります。
ease-out 最初が早くて、最後になるにつれ緩やかになります。
ease-in-out 最初と最後がとても緩やかになります。
linear 最初から最後まで一定にアニメーションします。
step-start 最初から一瞬で最後の状態になります。
step-end アニメーション時間の最後に一気に最後の状態になります。

その次は繰り返しの回数です。

infiniteで無限に繰り返します。
指定の回数繰り返したい場合はinfiniteの代わりに正の整数を使います。
5とすると5回繰り返されます。

最後にアニメーションの方向を指定します。

alternateはアニメーションを行ったり来たりさせる設定です。
0%から100%にアニメーションしていき、
100%から0%にアニメーションしていく感じです。

他にも以下のようなものがあります。

normal 指定した通りにアニメーションします。
reverse 指定した設定の最後から最初に向けてアニメーションします。
alternate アニメーションが行ったり来たりします。(normal→reverseの順に繰り返す)
alternate-reverse アニメーションが行ったり来たりします。
(reverse→normalの順に繰り返す)

なお、animationはスペースで区切って、

animation-name(アニメーションのタイトル)
animation-duration(アニメーションの時間)
animation-timing-function(アニメーションの変化の度合い)
animation-delay(アニメーションが始まる時間)
animation-iteration-count(アニメーションの繰り返し回数)
animation-direction(アニメーションの方向)
animation-fill-mode(アニメーションの開始前、終了後のスタイル)
animation-play-state(アニメーションの再生・停止)

の順に連続で指定していきます。
省略した場合はデフォルトの設定が指定されます。

なので

animation:tenten 1s ease-in-out infinite alternate;は

tentenと言うタイトルのアニメーションを1秒かけて最初と最後をとても緩やかに、
0%~100%までいったら今度は100%~0%に戻るを無限に繰り返す設定となります。

もちろん、このまま

animation:tenten 1s ease-in-out infinite alternate;の部分を1つずつ分解して

animation-name: tenten;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;

とすることもできますが、かなり面倒です。

枠内の文章だけ点滅させる

枠と文章がどっちも点滅していたら見にくすぎるから、
文章だけ点滅したいという人はこちらのコードを使ってみてください。

<style>
@keyframes tenten{
    0% {opacity:0;}
    100% {opacity:1;}
}  

.tenmetsu{
    animation:tenten 1s ease-in-out infinite alternate;
}
  
</style>
<div style="display:inline-block;
 background:#ffffff;
 padding:10px;
 border:3px double #fc4a1a;"><div class="tenmetsu">文章だけが<br>点滅するよ。
</div>
</div>


ここに文章

こんな感じになります。

枠だけ点滅させる

さっきの逆で文章はそのままで、枠だけ点滅させる方法です。
これが一番使えそうかな?


文章はそのまま

こんな感じ。

<style>
@keyframes wakuten {
  0% {
      border: 5px double #fc4a1a;padding: 16px
  }
  100% {
     border: 5px solid #ffffff;padding: 16px
  }
}
.waku-tenmetsu{
    animation: wakuten 1s linear infinite alternate;
}
</style>
<div class="waku-tenmetsu">ここに文章</div>

@keyframesの最初と最後にそれぞれ枠の設定してアニメーションさせる感じです。

画像に応用

枠を点滅させてきましたが、
以下のように画像を点滅させることもできます。

<style>
@keyframes wakuten2 {
  0% {opacity:0;
width:200px;
        }
  100% {opacity:1;
width:200px;
       }
}
.waku-tenmetsu2{
    animation: wakuten2 1s linear infinite alternate;
}
</style><div class="waku-tenmetsu2">
<img src="画像のURL" alt="画像の説明">
</div>

やり方は枠のときと同じ。
アニメーションを設定して、それをclassに設定。
画像のURLをclassで挟むだけです。

まとめ

・@keyframesでアニメーションを設定する
・animationで@keyframesで設定したアニメーションの動作を設定する
・以上2つを<style><style>で囲む
・animationをclassに設定する
・アニメーションさせたい要素を<div class></div>で囲む

タイトル付き枠と違って少し複雑になりますが、
CSS Animationを使うと簡単にアニメーションさせることができます。

今回は点滅させましたが、他にもいろいろできますよ。



こんなのもできちゃったりします。

目が回るぅ~