要素を斜め移動させるCSSアニメーションサンプル
指定したHTML要素を斜め移動させるCSSアニメーションのサンプルコードです。
要素を斜め移動させるCSSアニメーション
HTML要素を斜めに移動させるアニメーションのシンプルなCSSコードサンプルです。
See the Pen CSS | Afterimage animation by yochans (@yochans) on CodePen.
HTMLには親要素とする「.container」と、その中に移動させたい要素「.item」を設置しています。
<div class="container">
<div class="item"></div>
</div>要素を移動させるCSSコードは、主には top や left を操作する方法と、transform を操作する方法の2タイプがあります。
サンプルでは transform の translate を使って要素を移動させています。
translate(0, 0) から translate(150px, 150px) までを指定したアニメーション時間（3s）で移動します。
linear は一定の速度、infinite で繰り返し、alternate で巻き戻し再生を指定しています。
.container {
position: relative;
width: 100%;
height: 200px;
}
.item {
position: absolute;
width: 50px;
height: 50px;
background: #4169e1;
animation: diagonal-move-anim 3s linear infinite alternate;
}
@keyframes diagonal-move-anim {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(150px, 150px);
}
}用途や他のアニメーションの兼ね合いがありますので、どちらが良いかなどは無いと考えています。
translate でのパーセント指定は動かす要素のサイズが基準になるのでピッタリ一個分移動させたい時なんかには便利ですね。
逆に、親要素のサイズを基準にしたい場合や他で transform を指定していて上書きされるのを手軽に避けたい時は top や left で指定したりしています。
top や left で指定する場合は以下のようなアニメーションキーフレームになります。
@keyframes diagonal-move-anim {
0% {
top: 0;
left: 0;
}
100% {
top: 150px;
left: 150px;
}
}