背負い投げとENTER_FRAME

はてぶで記事を見かけた。

【[iOS 8] Safari8で CSS Shapesが使えるようになった。】
dev.classmethod.jp/references/ios8-safari-css-shapes-support/

以前仕事で、CSSでこう言う表現できないかと何回か聞かれた：
・不規則な形のマスキング
・さらにマスクの中身が動く

無理。無理だ。マスク中身が動かない、マスクが四角や丸なら、方法はいくつかある。

【CSSで様々なクリッピング方法！ 切り抜き】
http://hensachi35.com/clipping-01

「CSS Shapesが使えるようになった」というので、もしかしたらこれで出来るかも？
と思ってやってみた。

はい、出来た！

サンプルページ

CSSはこんな感じ。iOS8かChrome Canaryで見ようね。

.contanir{
	width: 500px;
	height: 300px;
	position: relative;
	background-image: url(0002.jpg);

	
}

.mask{
	width: 350px;
	height: 130px;
	position: absolute;
	
	background-image: url(0001.jpg);
	background-size: 800px 400px;
	
	-webkit-shape-image-threshold: 0.1;
	-webkit-mask-image: url(hosi.png);

	-webkit-animation-name: ani-hosi;
	-webkit-animation-duration: 2.2s;
	-webkit-animation-delay: 0s;
	-webkit-animation-direction: normal;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform: translate3d(160px, 40px, 0px);
}


@-webkit-keyframes ani-hosi {
	0%{
		background-position: 0px 0px;
		-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	50%{
		background-position: 200px 200px;
		-webkit-transform: translate3d(100px, 100px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
	}

	100%{
		background-position: 0px 0px;
		-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
}