[iPhone Safari] webkitAnimation を使って移動

'JavaScript/webkit/webkitAnimation' does not exist.


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


サンプル

iPhone で見てください



Counter: 0, today: 0, yesterday: 0

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS