A Pen by ryaninhust.

index.html

<img src="http://www.jiongyaya.com/uploads/allimg/130604/1-130604094933.png" alt="toast">
<div class="dialog">
  <div>AND SO TOAST FLEW OFF</div>
  <div>INTO THE STARS. FOREVER.</div>
  <div>HE NEVER CAME BACK...</div>
</div>

style.css

body {
	margin: 0;
	background-color: #4b6473;
	background-image:
    url(http://codersblock.com/assets/stars1.png),
    url(http://codersblock.com/assets/stars2.png),
    url(http://codersblock.com/assets/stars3.png);
	animation:
    stars 32s linear infinite,
	  fade 10s steps(5) 16s forwards;
}
img {
	position: absolute;
  top: 50%;
  left: 50%;
  margin: -200px 0 0 -64px;
	animation: toast 4s ease infinite;
}
.dialog {
	position: absolute;
  top: 50%;
  left: 50%;
  margin: 24px 0 0 -300px;
	width: 552px;
	padding: 12px;
	background-color: #fff;
	border: solid 12px #000;
  font: bold 22px/36px "Press Start 2P", monospace;
}
.dialog div {
	overflow: hidden;
	white-space: nowrap;
	width: 0;
	animation: dialog 5s steps(24) forwards;
}
.dialog div:nth-child(1) {
	animation-delay: 0s;
}
.dialog div:nth-child(2) {
	animation-delay: 6s;
}
.dialog div:nth-child(3) {
	animation-delay: 12s;
}

@keyframes toast {
	50% { transform: translateY(20px); }
	100% { transform: translateY(0px); }
}
@keyframes dialog {
	100% { width: 100%; }
}
@keyframes stars {
	100% { background-position:
      -2048px 512px,
      -4096px 512px,
      -8192px 512px; }
}
@keyframes fade {
	100% { background-color: #1d272d; }
}

Super-Toast-Story:-Final-Scene.markdown

Super Toast Story: Final Scene

A short 16-bit story scene animated purely with CSS3.

Forked from Will Boyd's Pen Super Toast Story: Final Scene.

A Pen by ryaninhust on CodePen.

License.