SOFTELメモ

</> 技術者募集

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

問題

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

やっぱJavaScript?jQuery?

CSSで動かせるの?

blue-balloon

答え

まだベンダープレフィックスが必要みたいだけど、こんな感じ。(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);}
}

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

(((( ;゚Д゚)))ガクガクブルブル

ぶるぶるしてますね。

ワーイ. ヽ( ´ ∇ ` )ノ ワーイ

飛んでますね。

アー ヽ(@△@)ノ アー

回ってますね。


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

関連するメモ

コメント