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