[iPhone Safari] アニメーション


webkitAnimation を使って移動

CSS を使って移動

CSS を使って画像を移動します。移動後にもとの位置に戻ってしまいます。

.slideToRight {
	-webkit-animation-name: "slideToRightAnimation";
	-webkit-animation-duration: 1s;
}
@-webkit-keyframes "slideToRightAnimation" {
	from {
		left: 0px;
	}
	to {
		left: 300px;
	}
}

JavaScript で CSS のクラスを指定して移動する

これもCSS を使って画像を移動します。JavaScript で CSS のクラスを指定して移動しています。

var element = document.getElementById("bigimage");
element.addEventListener("webkitAnimationEnd", function(e){
	e.currentTarget.removeEventListener("webkitAnimationEnd", arguments.callee, false);
	alert("webkitAnimationEnd");
}, false);
element.className = "slideToRight";
.slideToRight {
	-webkit-animation-name: "slideToRightAnimation";
	-webkit-animation-duration: 1s;
}
@-webkit-keyframes "slideToRightAnimation" {
	from {
		left: 0px;
	}
	to {
		left: 300px;
	}
}

移動後の位置を設定

移動後の位置を JavaScritp? で設定します。移動後に 300px の位置で止まります。

var element = document.getElementById("bigimage");
element.addEventListener("webkitAnimationEnd", function(e){
	e.currentTarget.removeEventListener("webkitAnimationEnd", arguments.callee, false);
	alert("webkitAnimationEnd");
}, false);
element.className = "slideToRight";
// 移動後の位置を設定します
element.style.left = "300px";
.slideToRight {
	-webkit-animation-name: "slideToRightAnimation";
	-webkit-animation-duration: 1s;
}
@-webkit-keyframes "slideToRightAnimation" {
	from {
		left: 0px;
	}
	to {
		left: 300px;
	}
}


Translate のアニメーション

アニメーションの比較

大きな画像を動かすのに、translate、translate3d で実装して比較してみる。
translate3d がいい感じ。
サンプルで見てみてください。


サンプル

iPhone で見てください



Counter: 9269, today: 2, yesterday: 0

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-09-24 (火) 14:56:11 (1522d)