前回の【はてなブログ】いろいろなタイトル付き枠の作り方で
一緒に記事にしようと思ったのですが、思いのほか長くなってしまったので
別記事にしてみました。
こんな枠もできるよって言うのを紹介していきます。
枠を点滅させる
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-in 最初は緩やかで、最後になるにつれ早くなります。
ease-out 最初が早くて、最後になるにつれ緩やかになります。
ease-in-out 最初と最後がとても緩やかになります。
linear 最初から最後まで一定にアニメーションします。
step-start 最初から一瞬で最後の状態になります。
step-end アニメーション時間の最後に一気に最後の状態になります。
その次は繰り返しの回数です。
infiniteで無限に繰り返します。
指定の回数繰り返したい場合はinfiniteの代わりに正の整数を使います。
5とすると5回繰り返されます。
最後にアニメーションの方向を指定します。
alternateはアニメーションを行ったり来たりさせる設定です。
0%から100%にアニメーションしていき、
100%から0%にアニメーションしていく感じです。
他にも以下のようなものがあります。
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;の部分を１つずつ分解して
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で挟むだけです。
まとめ
・animationで@keyframesで設定したアニメーションの動作を設定する
・以上2つを<style><style>で囲む
・animationをclassに設定する
・アニメーションさせたい要素を<div class></div>で囲む
タイトル付き枠と違って少し複雑になりますが、
CSS Animationを使うと簡単にアニメーションさせることができます。
今回は点滅させましたが、他にもいろいろできますよ。
こんなのもできちゃったりします。
目が回るぅ～
