投稿日: 投稿者: at-staffs

@keyframesでキーフレームアニメーションをつけてみた

以前、画像にちょっとした動きをつけて目を引きたかったので、CSSで簡単な動きをつけて見た事があったので、メモしておきます。

まずは@keyframesでどのような動きを付けるかを指定。
今回はこちらのサイトを参考にtransformを使ったシンプルな動きです。

実際に使った動きの他に、いくつかサンプルで動きを試してみました。
基本的なhtmlは下記の通り、単純です。



<p class="sample">動きのサンプル</p>

●横の動き

横の動き

@keyframes horizontal {
0% { transform:translateX( -10px); }
100% { transform:translateX( 10px); }
}
.sample01 {
animation: horizontal 1s linear infinite alternate;
}

●縦の動き

縦の動き

@keyframes vertical {
0% { transform:translateY(-10px); }
100% { transform:translateY( 10px); }
}
.sample{
animation: vertical 1.5s ease infinite alternate;
}

●ななめの動き

ななめの動き

@keyframes diagonal {
    0% { transform:translate( -10px , -10px); }
  100% { transform:translate(  10px , 10px); }
}
.sample{
    animation: diagonal 2s ease-in-out infinite alternate;
}

●四角？な動き

四角？な動き

@keyframes square {
    0% { transform:translate( -10px , -10px); }
   25% { transform:translate( 10px , -10px); }
   50% { transform:translate( 10px , 10px); }
   75% { transform:translate( -10px , 10px); }
  100% { transform:translate( -10px , -10px); }
}
.sample{
    animation: square 1.5s ease-in-out infinite ;
}

@keyframesを始点（0％）と終点（100％）だけでなく、途中にもいくつかポイントを追加して、カクカクした動きにしてみた。
CSS：animationから「animation」（交互に反転再生　…要は往復するみたいなモンですね）を外して、ぐるぐるまわる感じにしています。

●不規則な動き
実際に使用した動きです。（…よりは、ちょっと動きを大げさにしましたが）

不規則な動き

<p class="sample"><span>不規則な動き</span></p>

@keyframes yuratate {
    0% { transform:translateX( -7px); }
  100% { transform:translateX(  7px); }
}
@keyframes yurayoko {
    0% { transform:translateY( -3px); }
  100% { transform:translateY(  3px); }
}
.sample{
    animation: yuratate 1.7s ease-in-out infinite alternate;
}
.sample span {
	display:block;
    animation: yurayoko 1s ease-in-out infinite alternate;
}

animationは1つの要素に複数指定できないようだったので、二重にしてそれぞれに縦と横の動きを。
再生時間をずらして、ちょっと不規則な感じにしてみました。

animationは時間やイージングの設定ができます。
下記のように設定しています。

animation:[キーフレーム名],[再生時間],[イージング],[再生回数],[反転再生];

■イージング
ease：初期値。アニメーションの開始と終了を滑らかにする。（初期値）
linear：一定の速度で再生。
ease-in：ゆっくり始まる。
ease-out：ゆっくり終わる。
ease-in-out：ゆっくり始まり、ゆっくり終わる。
cubic-bezier(数値, 数値, 数値, 数値)：3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定。…上級者向けだと思おう。

■再生回数
infinite：無限。
数字：数字分再生する。

■反転再生
normal：通常の再生。（初期値）
alternate：奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す。

今回は上下の動きだけで動きをつけていますが、回転させたり斜めにしたり、もっと応用が利きそうです。
それらはいずれまた…

カテゴリーCSS