transformプロパティ + 用意されている関数を指定することでアニメーションを設定することが可能です。
準備
まずはbodyタグ内に以下のような正方形を動作の確認用として作成します。
※今回はstyle.css
内に動きが分かりやすいよう、transition: transform 1.0s
で1秒間かけて移動するようにしています。
index.html
<div>
<div class="target"></div>
</div>
style.css
.target {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: skyblue;
transition: transform 1.0s;
}
translateで移動させてみる
物体の位置を移動するときに使用
style.css
.target {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: skyblue;
transition: all 1.0s;
transform: translate(100px, 100px);
}
transform: translate(x軸(横方向), y軸(縦方向));
と指定することで物体を指定した位置に移動させることが可能。
今回の場合だと 第一引数(x軸)に100px,第二引数に100px(y軸) を指定することで、
x軸方向に100px、y軸方向に100px移動させることが可能です。