Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

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

$
0
0

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;}

スクリーンショット 2020-12-04 6.20.59.png

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

041.gif


Viewing all articles
Browse latest Browse all 8691

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>