fisker/fade-out and hide

## fade-out and hide

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    body{
      font-family: Tahoma;
      background: #eee;
    }

    button {
      background: #3d6;
      color: #fff;
      border: 0;
      font: inherit;
      line-height: 2.5;
      border-radius: 1px;
      cursor: pointer;
    }

    button.test{
      background: #36d;
      position: absolute;
      top: 10px;
      right: 10px;
    }

    div {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 50%;
      background: #d36;
      padding: 0 10px;
    }

    style[contenteditable] {
      display:block;
      background: #fff;
      white-space: pre-wrap;
      padding: 10px;
      border: 1px solid #ddd;
      margin: 10px 0;
      -webkit-user-modify: read-write-plaintext-only;
    }
  </style>
</head>
<body>
<button onclick="document.querySelector('div').style.animationName='none'">none</button>
<button onclick="document.querySelector('div').style.animationName='my-fade-out'">my-fade-out</button>
<button onclick="document.querySelector('div').style.animationName='fade-out'">fade-out</button>
<button onclick="document.querySelector('div').style.animationName='fade-in'">fade-in</button>

<button class="test" onclick="alert('i can be clicked')">i can be clicked</button>
<div>
<style contenteditable="plaintext-only"
>div {
  animation-duration: 1000ms;
  animation-fill-mode: both;
}</style>
</div>

<hr>
my-fade-out
<style contenteditable="plaintext-only"
>@keyframes my-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    /*
      how to set `display: none` here
    */
  }
}</style>
fade-out
<style contenteditable="plaintext-only"
>@keyframes fade-out {
  0% {
    opacity: 1;
  }

  99% {
    opacity: 0;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}</style>
fade-in
<style contenteditable="plaintext-only"
>@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}</style>

</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
	body{
	font-family: Tahoma;
	background: #eee;
	}

	button {
	background: #3d6;
	color: #fff;
	border: 0;
	font: inherit;
	line-height: 2.5;
	border-radius: 1px;
	cursor: pointer;
	}

	button.test{
	background: #36d;
	position: absolute;
	top: 10px;
	right: 10px;
	}

	div {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 50%;
	background: #d36;
	padding: 0 10px;
	}

	style[contenteditable] {
	display:block;
	background: #fff;
	white-space: pre-wrap;
	padding: 10px;
	border: 1px solid #ddd;
	margin: 10px 0;
	-webkit-user-modify: read-write-plaintext-only;
	}
	</style>
	</head>
	<body>
	<button onclick="document.querySelector('div').style.animationName='none'">none</button>
	<button onclick="document.querySelector('div').style.animationName='my-fade-out'">my-fade-out</button>
	<button onclick="document.querySelector('div').style.animationName='fade-out'">fade-out</button>
	<button onclick="document.querySelector('div').style.animationName='fade-in'">fade-in</button>

	<button class="test" onclick="alert('i can be clicked')">i can be clicked</button>
	<div>
	<style contenteditable="plaintext-only"
	>div {
	animation-duration: 1000ms;
	animation-fill-mode: both;
	}</style>
	</div>

	<hr>
	my-fade-out
	<style contenteditable="plaintext-only"
	>@keyframes my-fade-out {
	0% {
	opacity: 1;
	}

	100% {
	opacity: 0;
	/*
	how to set `display: none` here
	*/
	}
	}</style>
	fade-out
	<style contenteditable="plaintext-only"
	>@keyframes fade-out {
	0% {
	opacity: 1;
	}

	99% {
	opacity: 0;
	transform: scale(1);
	}

	100% {
	opacity: 0;
	transform: scale(0);
	}
	}</style>
	fade-in
	<style contenteditable="plaintext-only"
	>@keyframes fade-in {
	0% {
	opacity: 0;
	}

	100% {
	opacity: 1;
	}
	}</style>

	</body>
	</html>