Email送信の動作を明確にするアニメーションです。下の黄色の封筒をクリックすると、封筒が開き、ドキュメントのアイコンが上に飛び出して右へ飛んでいき、封筒が閉じます。。また、下側の「animationリセット」ボタンをクリックすると、送信アニメーションを再度発動させることができます。アニメーションなどはCSSのみで作られていますが、アニメーションのリセット判定用にだけJavaScriptが使われています。

animationをリセット

htmlソース

<div class="container" onclick="ani()">
	<div class="envelope-main"></div>
	<div class="envelope-bottom"></div>
	<div class="envelope-right"></div>
	<div class="envelope-left"></div>
	<div class="envelope-top" id="top"></div>
	<img id="doc" src="https://maxcdn.icons8.com/Share/icon/Logos//google_docs1600.png" width="70px">
</div>
<button onclick="reset()">animationをリセット</button>

JavaScript

function ani() {
	document.getElementById("top").classList.add("foldy");
	document.getElementById("doc").classList.add("gone");
	}
function reset() {
	document.getElementById("top").classList.remove("foldy");
	document.getElementById("doc").classList.remove("gone");
	}