読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

infoアイコンから×へ ハンバーガーアニメーションの応用

スポンサードリンク

巷では賛否両論あるハンバーガーメニューですが、実際多くのユーザーに認知されたインターフェースであることは間違いなさそうです。

下記記事は、面白かったです。
qiita.com

今回は、別のアイコンから×にアニメーションできるか試してみました。

例えばmenuナビと並んでinfoアイコン(iを円で囲んだアイコン)があって、タップするとトグルが開くようなUIですね。
その際menuと同じようにinfoアイコンもアニメーションで×にしたい訳です。


See the Pen jrJxoK by funclur (@funclur) on CodePen.

ポイントは、円をどうアニメーションさせるかですが、下記のように回転させながらボーダーの黒いをアニメーションで透過させていきます。

.menu-trigger.active::after {
	-webkit-animation: circle .5s .25s forwards;
	animation: circle .5s .25s forwards;
}
@-webkit-keyframes circle {
	0% {
		border-color: transparent;
		-webkit-transform: rotate(0);
	}
	25% {
 		border-color: transparent #000 #000 #000;
	}
	50% {
		border-color: transparent #000 #000 transparent;
	}
	75% {
		border-color: transparent #000 transparent transparent;
	}
	100% {
		border-color: #000;
		-webkit-transform: rotate(-680deg);
	}
}
@keyframes circle {
	0% {
    border-color: #000;
		transform: rotate(0);
	}
	25% {
		border-color: transparent #000 #000 #000;
	}
	50% {
		border-color: transparent #000 #000 transparent;
	}
	75% {
    border-color: transparent #000 transparent transparent;
	}
	100% {
				border-color: transparent;
		transform: rotate(-680deg);
	}
}

いろんなアイコンで×へのアニメーションができそうですね。