【CSS3】transform + translateでアニメーション

3275 ワード
HTML CSS Web HTML テキストリンク

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移動させることが可能です。