どうも！LSSです！！
今日は、CSSでアニメーションをやってみます！
先日、transitionを使ったアニメーションをやりましたが、あの場合は
「なんらかのユーザー操作を受けてスタートする」
事になりますが、今回は何もしなくても最初から勝手に動いているものを作ります。
飛び出し注意！
サンプル
このお値段、目ン玉飛び出ますよね~
コード
<style><!--
@keyframes sc3dk{
from{
transform:scale3d(1,1,1);
}
to{
transform:scale3d(1.5,1.5,1.5);
}
}
.sc3d{
display:inline-block;
animation:sc3dk 0.5s ease 0s infinite alternate;
}
--></style>
<p> このお値段、<span class="sc3d">目ン玉飛び出</span>ますよね~</p>
ゆらゆら
サンプル
気持ちが揺れる、悩ましい誘惑…
コード
<style><!--
@keyframes rtzk{
from{
transform:rotateZ(-10deg);
}
to{
transform:rotateZ(10deg);
}
}
.rtz{
display:inline-block;
animation:rtzk 0.5s ease 0s infinite alternate;
}
--></style>
<p> 気持ちが<span class="rtz">揺れる</span>、悩ましい誘惑…</p>
ぴょんぴょん
サンプル
もうとっても楽しみ！気持ちがはずむはずむ！！
コード
<style><!--
@keyframes trslk{
from{
transform:translateY(0px);
}
to{
transform:translateY(-15px);
}
}
.trsl{
display:inline-block;
animation:trslk 0.5s ease 0s infinite alternate;
}
--></style>
<p> もうとっても楽しみ！<span class="trsl">気持ち</span>がはずむはずむ！！</p>
解説
３つとも、似たようなコードをちょこっと書き換えたものです。
ひとつめのコードで言うと
<style><!--
@keyframes sc3dk{
from{
transform:scale3d(1,1,1);
}
to{
transform:scale3d(1.5,1.5,1.5);
}
}
.sc3d{
display:inline-block;
animation:sc3dk 0.5s ease 0s infinite alternate;
}
--></style>
<p> このお値段、<span class="sc3d">目ン玉飛び出</span>ますよね~</p>
こんな風に２つの任意の名前を２か所づつ入れています。
この例でいう「sc3dk」はキーフレーム名、「sc3d」はクラス名です。
最後の一行以外が、スタイルシートを定義している部分で、最後の一行のように
<span>タグにclass="sc3d"のようにクラスを指定すると、その<span>タグで挟まれた部分だけがアニメーションの対象となります。
ＣＳＳでアニメーションする場合、まず「キーフレーム（変化前と変化後の状態）」を定義しておいて、クラスなどに「そのキーフレームをどのぐらいのタイミングで利用するか」を設定する事になります。
まず、「@keyframes キーフレーム名」でキーフレームを定義します。
@keyframes sc3dk{
from{
transform:scale3d(1,1,1);
}
to{
transform:scale3d(1.5,1.5,1.5);
}
}
fromが「変化前」、toが「変化後」。
その内容は{と}で括ります。
from{
transform:scale3d(1,1,1);
}
transform:scale3dは「横・縦・奥行」の拡大率です。
この場合「変化前は１倍（つまり拡大しない）」という指定です。
to{
transform:scale3d(1.5,1.5,1.5);
}
同様に、scale3dを使って「変化後は1.5倍」になるように指定しています。
これで「等倍→1.5倍」に変化するよう指定したキーフレームができました！
.sc3d{
display:inline-block;
animation:sc3dk 0.5s ease 0s infinite alternate;
}
一行目のdisplay:inline-block;は「インライン要素なのにブロック要素として表示」する、という指定です。
…CSSの考え方に「インライン要素」と「ブロック要素」と分かれるところがあって、ブロック要素にしか指定できないプロパティなどがありますが、ブロック要素は「行の途中の一部分」にはできません。（前後で改行されてしまいます）
今回みたいな事をする場合にはinline-blockはとても都合がいいですね^^
二行目、
animation:sc3dk 0.5s ease 0s infinite alternate;
アニメーションに関する様々な指定を、一行に詰め込んだ書き方になります。
日本語に翻訳すると、
「sc3dkというキーフレームで指定した変化を、0.5秒で動作させる、動作の加速度はeaseで、0秒後から開始。繰り返し回数は無限（infinite）。繰り返し方は、最後までアニメしたら次は逆再生で最初に戻る(alternate)。」
という感じになります^^
おまけ：汎用性を無視してみる！
サンプル
まぁ、こんな感じで色々混ぜる事もできるわけです。
コード
<style><!--
@keyframes bikkurik{
0%{
transform:translateY(0px) rotateZ(0deg) scale3d(1,1,1);
color:black;
text-shadow:0px 0px 0px black;
}
50%{
transform:translateY(0px) rotateZ(0deg) scale3d(1,1,1);
color:black;
text-shadow:0px 0px 0px black;
}
100%{
transform:translateY(-50px) rotateZ(720deg) scale3d(3,3,3);
color:red;
text-shadow:0px 0px 5px yellow;
}
}
.bikkuri{
display:inline-block;
animation:bikkurik 2s ease 0s infinite alternate;
}
--></style>
<p> まぁ、こんな感じで<span class="bikkuri">色々混ぜる事</span>もできるわけです。</p>
fromの代わりに0%、toの代わりに100%、と、アニメーションの進捗度を%で指定したり、途中の50%とかの途中経過を設定したりもできます^^
…昨日の記事のコメントで421miyakoさん(id:m421miyako)から
「コピペでできて応用力が無くても、見た人がびっくりするような技がいいです。」
とリクエストがありましたので、最後に変化の大きいものを入れてみましたｗ
（ありがとうございます^^）
今回は文字を対象にしていましたが、線や背景の色や、ボックスの形状などを対象にするとか、応用の幅は広そうです！
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
