CSSのみでふわふわ浮かぶアニメーションを作ってみる

2018.07.09

たまに「MOJA net」のトップページを開いたときの、アイコンがふわふわ浮いているアニメーションはどうやって作るのか聞かれる事があるので、今回はその仕組みを解説しようと思います。
有名なところだと「jqFloat.js」などJavaScriptで作るプラグイン等もあるのですが、私は単純にCSSのみで再現しております。

では、まずソースから見ていきましょう。

HTML

CSS

#balloon{
	width:3vw;
	height:4vw;
	fill:#60B99A;
	animation: 3.5s Roll ease-in-out infinite;
}

#balloon span{
	display:block;
	animation: FloatHorizontal 7.0s ease-in-out infinite alternate;
}

#balloon svg{
	animation: FloatVertical 6.0s ease-in-out infinite alternate;
}

@keyframes Roll {
	0% { transform: rotateZ(15deg) scale(0.9); }
	50% { transform: rotateZ(-15deg) scale(1.0); }
	100% { transform: rotateZ(15deg) scale(0.9); }
}

@keyframes FloatHorizontal {
	0% { transform:translate3d(2.5vw,0,0); }
	50% { transform:translate3d(-2.5vw,0,0); }
	100% { transform:translate3d(2.5vw,0,0); }
}

@keyframes FloatVertical {
	0% { transform:translate3d(0,2.5vw,0); }
	50% { transform:translate3d(0,-2.5vw,0); }
	100% { transform:translate3d(0,2.5vw,0); }
}

RESULT

基本的にはふわふわさせたい要素と、それを取り囲む要素の二つがあれば、ふわふわのアニメーションは作ることが可能です。この二つの要素に、それぞれ縦と横のループ運動を適用すると、ふわふわ動いているアニメーションの完成です。

もう少し詳しく見ていきましょう。
まず「transform:translate3d」(translateYでも結構ですが、translate3dの方がモバイル環境等でGPUが働くので、滑らかに動くと思います)で縦方向への移動を指定したキーフレーム"FloatVertical"を作ります。
そして"FloatVertical"を適用した要素には、無限に繰り返す「infinite」と順方向、逆方向のアニメーションを交互に繰り返す「alternate」を指定してループする動きを作ります。

縦運動を繰り返す"FloatVertical"

同じように横方向へ動くキーフレーム"FloatHorizontal"を作り、「infinite」と「alternate」を指定して横移動のループを行う動きを作ります。その際にアニメーションの実行時間は"FloatVertical"とは違う秒数で指定するのがポイント。

横運動を繰り返す"FloatHorizontal"

この二つの動きをミックスすれば、JavaScriptを使わなくてもCSSのみで簡単にふわふわしたアニメーションを作ることが可能です。一番上の実行結果では、ちょっと物足りないのでさらに取り囲む要素を追加して、回転運動と拡大縮小を加えてみました。

以下は回転運動と拡大縮小の動きの抽出です。こちらのアニメーションの実行時間も上の二つとは違う秒数で指定してください。

回転運動と拡大縮小を行う"Roll"

取り囲む要素を追加すれば、さらに複雑な動きを作ることもできます。
もっと自然な動きを求めるのなら、アニメーションの数値を不規則にすると良いでしょう。
アニメーションの距離を短くして速度を早めると、ぶるぶるといった動きも再現する事ができます。

下はさらに応用編として、ふわふわ動く風船にSVGで紐をつけてみました。

RESULT

二つの要素をSVGのline描画で繋いでいるだけなのですが、応用次第でなかなか面白い効果が再現できますね。制御点と中点を追加してpathで描画すれば、さらに自然な紐の動きも再現できるでしょう。SVGアニメーションについては、今後取り上げますのでもう少々お待ちくださいませ。

Copyright © 2018, Mo-ja.net All Rights Reserved.