【CSS】ふわふわゆらゆらさせる

Tweet

Category css 2013/05/15

問題

目立たせたいものがあるので、バナーや文字をちょっと動かしてみようと思う。

やっぱJavaScript？jQuery？

CSSで動かせるの？

答え

まだベンダープレフィックスが必要みたいだけど、こんな感じ。（IEでは、害はないですが、いつもと変わらず停止して見えます。）

/* ふわふわさせたいものに fuwafuwaクラスを付与 */
.fuwafuwa {
	-webkit-animation-name:fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}

パラメータを変えたりアニメーションの定義を変えればいろんな動きができる。

(((( ;ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

ぶるぶるしてますね。

ﾜｰｲ. ヽ( ´ ∇ ｀ )ノ ﾜｰｲ

飛んでますね。

アー ヽ(＠△＠)ノ アー

回ってますね。

仕様が変わりそうだし、記述が長くなるし、使用頻度は低そうですけど、こんなこともできます　ということで。