【変態CSSシリーズ】CSSのみでロケットを作る方法

公開日：

【変態CSSシリーズ】CSSのみでロケットを作る方法のサムネイル画像

皆さんCSSでできることの線引きはできていますか？
デザイン上諦めて画像にしていませんか？

実はCSSはアイデア次第で大抵のものを作れますし、画像にはできないアニメーションも可能です。
また、世界にないOnly Oneのものを作れたらクリエイターとして自信と技術がつき、より複雑なアニメーションやオブジェクトを作れるようになっていきます。

webアニメーションはユーザーにとって素晴らしいUI、UXを届けることができます。
その結果いいサイトとして評価されることになるでしょう。

今回はCSSだけで「ロケット」を作っていきます。
なぜロケットかというと・・・ロケットは男のロマンだからです。うん。

それでは早速本題に入っていきましょう。

目次
  1. CSSだけで作ったロケットの完成形
  2. ロケット後方、炎の噴出口の解説
  3. 点火の炎の解説
  4. ロケットが横に移動する動きの解説
  5. transitionアニメーションとCSS animationの使い分け
  6. まとめ

CSSだけで作ったロケットの完成形

カーソルを合わせてみてください。ロケットが発射します。
※CodePenページから見たほうが見やすいです。

ロケット後方、炎の噴出口の解説

CodePen26行目の疑似要素に記述しています。
複雑な形をしていますが、実は簡単です。
疑似要素のborderで円形を作って、左の部分だけ透明にし、上右下方向を背景色に合わせて白にします。
初期位置はright:-32px;でボタン外に配置しておき、

.rocket{
	a{
	 &:after{
      content:"";
      display: block;
      position: absolute;
      top:3px;
      right:-32px;
      margin:auto;
      width:0;
      height:0;
      border-width:21px;
      border-style:solid;
      border-color:white white white transparent;
      border-radius: 50px;
      transition:.3s;
	}
  }
}

hover状態になったら（CodePen84行目）right:-3px;で左に移動して複雑な形に見えるようにしています。

.rocket{
  &:hover{
    a{
      &:after{
        border-top:21px solid white;
        border-right:21px solid white;
        border-radius: 30px;
        right:-3px;
      }
    }
  }
}

点火の炎の解説

丸い炎、横に伸びる炎と2つの要素に分けて実装しています。
炎の輪郭のボヤッとしている部分はbox-shadowを複数適用してリアリティを高めています。
また、CSSアニメーションで2つの炎をそれぞれ上下、左右に小刻みに動かしてリアルに振動させています。

以下は初期配置です。

.rocket{
	a{
		.fire{
			display: block;
			position: absolute;
			left: 98%;
			top:0;
			bottom:0;
			margin:auto;
			height: 40px;
			z-index: 10;
			span{
				&.fire__circle{
					display: block;
					width:40px;
					height:40px;
					border-radius:50%;
					box-shadow: 0px 0px 10px #4ba2fb, inset 0px 0px 5px #4ba2fb, inset 0px 0px 15px #4ba2fb;
					transform:scale(0);
					transition:.2s ease;
					position: relative;
				}
				&.fire__burst{
					content: "";
					position: absolute;
					left:120%;
					top: 0;
					bottom: 0;
					margin:auto;
					width:0;
					height:35px;
					border-top-left-radius:20px;
					border-bottom-left-radius:20px;
					box-shadow: 0px 0px 10px #4ba2fb, 0px 0px 10px #4ba2fb, 0px 0px 20px #4ba2fb, inset 0px 0px 15px #4ba2fb, inset 0px 0px 10px 0px #4ba2fb;
					transform:scaleY(0);
					transition:transform .2s ease,width .3s ease .3s;
				}
			}
		}
	}
}

hoverしたら点火します。

.rocket{
	&:hover{
		a{
			.fire{
				animation: fireCircle .02s infinite alternate;
				span{
					&.fire__circle{
						transform:scale(1);
					}
					&.fire__burst{
						transform:scaleY(1);
						width:200vw;
						animation: fireBurst .01s infinite alternate;
					}
				}
			}
		}
	}
}
@keyframes fireCircle {
	100%{
		transform:translateX(-4px);
	}
}
@keyframes fireBurst {
	100%{
		transform:translateY(-2px);
	}
}

ロケットが横に移動する動きの解説

こちらはtransformで横に移動させています。点火して徐々に早くなるようにtransitionを細かく調整しています。

.rocket{
	text-align:center;
	margin:2em auto;
	transition:1.5s cubic-bezier(0.68, -0.01, 0.96, 0.38);
	&:hover{
		transform:translateX(-90vw);
		transition:1.5s cubic-bezier(0.68, -0.01, 0.96, 0.38) .7s;
	}
}

transitionアニメーションとCSS animationの使い分け

今回transitionアニメーションとanimationを使いましたが、使い分ける際のポイントとしては繰り返してアニメーションする必要があるかどうかになります。
また、A地点→B地点→C地点に移動といった複雑なアニメーションの場合はCSS animationが最適です。

今回は炎の上下左右の小刻みな振動は繰り返しアニメーションする必要があったため、CSS animationを使用しました。
ロケットが横に移動する動きは一回きりのアニメーションだったのでtransitionアニメーションを使用しました。

このようにアニメーションを実装する前にどちらが最適かを考える必要があります。

animationはtransitionよりも記述量が多くなるので、単純なアニメーションであれば手軽に使えるtransitionアニメーションを選択することをおすすめします。

まとめ

いかがでしたでしょうか。
今回はCSSだけでユーザーの目を引くアニメーションを実装してみました。
transition or CSS animation + 自分のアイデア次第で、
リッチなアニメーションがJavaScriptやプラグインを使わずとも実装できます。

手を動かす事が一番力になる方法になるので、日常にあるものをCSSで具現化してみるといい練習になります。PCやキャラクター等何でもいいと思います。
練習を続けることで応用力のあるスキルが身につき、他のエンジニアよりも一歩先を行くことができると思います。

関連するオススメの記事はこちら