Javascriptやライブラリを使わないでCSSだけを使って指定した要素を上下に動くアニメーションを作成する方法を紹介したいと思います。
HTMLやCSSのコードも紹介しているのでコピペして使うことも可能です!!
上下に動くアニメーションの作成方法
今回は、上下に動かす要素は、divタグを使い作成します。
<div class="layout updown"></div>divタグの中に2つクラスを作成しましたが1つはレイアウト用、もう1つアニメーションで使用するためのクラスです。
これでHTMLのコードは終わりなのでCSSでレイアウト用のCSSを記入していきます。
今回は、分かりやすいように上下200pxの赤色のボックスを作成しました。
/*レイアウト用CSS*/
.layout{
width:200px;
height:200px;
background-color:red;
}正方形の赤色のボックスが出力されます。
See the Pen
Untitled by yuki (@yuki_web)
on CodePen.
このボックスを上下に動かしたいと思います!
この後、updownクラスにアニメーションを設定していきます。
/*アニメーション用CSS*/
.updown{
/* アニメーションの名前 */
animation-name:UpDown;
/* アニメーションの１回分の長さ */
animation-duration: 1.5s;
/* アニメーションの回数 */
animation-iteration-count: infinite;
/* アニメーションの進行具合 */
animation-timing-function: ease-in-out;
/* アニメーション再生の向き */
animation-direction: alternate;
}
/* アニメーションの設定 */
@keyframes UpDown{
/* 開始地点 */
0%{
/* Y軸0px */
transform: translateY(0);
}
/* 終了地点 */
100%{
/* Y軸50px */
transform: translateY(50px);
}
}長く少し難しそうと思うかもしれませんが理解すればとても簡単な設定です!
animation-name:UpDown;は、アニメーションを設定するための定義名を記載しています。
定義した名前は、@keyframes UpDown{}で使用します。
animation-duration: 1.5s;は、アニメーション1回分の長さを設定しanimation-iteration-count: infinite;は、動きをループさせるか設定します。
例えば1回だけの場合、animation-iteration-count: 1;にすると1回分の動きになります。
しかし気をつけて欲しいのが、今回の動きは上下に動く往復のアニメーションなので実際には、下に１回上に１回の合計２回の動きがあるので上下に１回だけアニメーションをしたい場合animation-iteration-count: 2;となります。
animation-timing-function: ease-in-out;は、アニメーションの進行具合を操作しています。
今回は、上下にループするアニメーションなので開始と終了時が緩やかに設定したいのでease-in-outにしました。
animation-direction: alternate;は、アニメーション再生の向きを設定することができこれが上下に動かすポイントとなります。
alternateは、奇数回では「普通方向」、偶数回では「逆方向」の再生で繰り返します。
なので、animation-iteration-count数値が2の場合、普通方向、逆方向と再生を繰り返すので下、上というアニメーションになります。
これを今回無限ループしてるので下上のアニメーションがループします。
最後にアニメーションの設定をおこないます。
@keyframes UpDown{}で囲い、fromとtoで開始と終了のアニメーションを作成します。
fromとtoではなく0%と100%でも大丈夫です。
移動系のアニメーションは、Y軸(縦軸)の場合、transform: translateY(Y軸方向の移動距離);を記入します。
開始地点は、0で終了地点は、50pxにしたのでfrom内には、transform: translateY(0);to内には、transform: translateY(50px);と記入します。
これでアニメーションが完成します!
See the Pen
Untitled by yuki (@yuki_web)
on CodePen.
軸をX(横軸)に変えたり動きの速さを変えることで上下以外のアニメーションも作成可能なのでオリジナルでいろいろ作成してみてください!!
