Transition プロパティを利用した要素の移動アニメーション - CSS
Transition プロパティを利用してCSSで要素を移動させるアニメーションを作成します。
概要
Transition プロパティを利用すると、クラスが設定された際の変化を時間をかけて徐々に変更できます。
この機能を利用して要素に対するアニメーションを実装できます。
今回は要素を移動させるアニメーションを実装します。要素を移動する場合は、top, left プロパティなどの位置を設定するプロパティを
変更してアニメーションを実装します。
プログラム例
コード
以下のCSS、HTRMLファイルを作成します。
.char_image {
left: 0;
position: relative;
width: 160px;
transition-duration: 4s;
transition-timing-function:ease-in-out;
}
.char_image_end {
left:600px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="move.css" />
<script type="text/javascript">
function SetStart() {
var elem = document.getElementById("image1");
elem.classList.add("char_image_end");
}
</script>
</head>
<body>
<img id="image1" class="char_image" src="image.svg" />
<hr />
<a href="javascript:SetStart();" >Start</a>
</body>
</html>
画像ファイルimage.svgはこちらを利用しています。
解説
HTMLファイルでは、imgタグにより画像を表示しています。アニメーションをスタートさせるリンクは
SetStart() 関数を呼び出す動作になっています。
<body>
<img id="image1" class="char_image" src="image.svg" />
<hr />
<a href="javascript:SetStart();" >Start</a>
</body>
SetStart関数では、"image1" のIDを持つ要素を主とし、その要素に char_image_end のクラスを追加しています。クラスを追加することで、
あたらなプロパティが追加され、表示内容が変化しその変化がアニメーションとなります。
function SetStart() {
var elem = document.getElementById("image1");
elem.classList.add("char_image_end");
}
画像の表示のCSSでは、初期状態では leftプロパティは0に設定されています。
position:relativeの設定により、座標で位置を変更できるようにします。image要素はブロック要素ですので、デフォルトの状態では座標値を設定しても位置は変わりません。
transition-durationプロパティは新しい表示状態が設定された際に、何秒かけてアニメーションするかをしています。今回4秒で設定しています。
transition-timing-functionはアニメーションの変化のしかた(イージング)を設定します。イージングについては
こちらの記事を参照して下さい。
.char_image {
left: 0;
position: relative;
width: 160px;
transition-duration: 4s;
transition-timing-function:ease-in-out;
}
char_image_end クラスでは leftプロパティが600に設定されているため、
char_image_end クラスが追加されると、表示位置が右側に変更されます。
transition-durationプロパティが指定されていますので、4秒かけて右方向にアニメーションします。
.char_image_end {
left:600px;
}
実行結果
HTMLファイルを表示します。下図の画面が表示されます。
[Start]のリンクをクリックします。リンクをクリックするとアニメーションが始まり、画像が右に動き始めます。
600ピクセルの位置まで移動すると移動が停止し、下図の画面の状態になります。
CSSのTransitionプロパティを利用してアニメーションができました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
