CodePen Embed - Fly in, fly out

<html>

    <body>

        <p>fly in, fly out</p>

    </body>

</html>

@import url("https://fonts.googleapis.com/css?family=Syncopate");

html, body {
  -webkit-font-smoothing: antialiased;
  font-family: 'Syncopate', Helvetica, Arial;
	text-transform: uppercase;
	margin: 0;
	height: 100%;
	width: 100%;
	display: table;
}
html {
  /* subtlepatterns.com */
	background: url("http://neilcarpenter.com/demos/asfalt.png") repeat;
}
body {
	overflow: hidden;	
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.44))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* W3C */
}
p {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size: 2em;
	line-height: 2em;
}
i {
	display: inline-block;
	font-style: normal;
	padding: 0 0.25em;
	-webkit-transform: scale(0) translate3d(0, -2000px, 0);
	   -moz-transform: scale(0) translate3d(0, -2000px, 0);
		-ms-transform: scale(0) translate3d(0, -2000px, 0);
		 -o-transform: scale(0) translate3d(0, -2000px, 0);
			transform: scale(0) translate3d(0, -2000px, 0);
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
}
i.fly-in-out {
	-webkit-animation: fly-in-out 3s infinite ease-in-out;
	   -moz-animation: fly-in-out 3s infinite ease-in-out;
		 -o-animation: fly-in-out 3s infinite ease-in-out;
			animation: fly-in-out 3s infinite ease-in-out;
}

@-webkit-keyframes fly-in-out {
	0% {
		-webkit-transform: scale(0) translate3d(0, -1000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
	15%, 85% {
		color: rgba(255, 255, 255, 0.8);
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
		-webkit-transform: scale(1) translate3d(0, 0, 0);
		background: transparent;
		box-shadow: none;
	}
	100% {
		color: transparent;	
		-webkit-transform: scale(0) translate3d(0, 1000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
}
@-moz-keyframes fly-in-out {
	0% {
		-moz-transform: scale(0) translate3d(0, -2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
	15%, 85% {
		color: rgba(255, 255, 255, 0.8);
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
		-moz-transform: scale(1) translate3d(0, 0, 0);
		background: transparent;
		box-shadow: none;
	}
	100% {
		color: transparent;	
		-moz-transform: scale(0) translate3d(0, 2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
}
@-o-keyframes fly-in-out {
	0% {
		-o-transform: scale(0) translate3d(0, -2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
	15%, 85% {
		color: rgba(255, 255, 255, 0.8);
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
		-o-transform: scale(1) translate3d(0, 0, 0);
		background: transparent;
		box-shadow: none;
	}
	100% {
		color: transparent;	
		-o-transform: scale(0) translate3d(0, 2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
}
@keyframes fly-in-out {
	0% {
		transform: scale(0) translate3d(0, -2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
	15%, 85% {
		color: rgba(255, 255, 255, 0.8);
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
		transform: scale(1) translate3d(0, 0, 0);
		background: transparent;
		box-shadow: none;
	}
	100% {
		color: transparent;	
		transform: scale(0) translate3d(0, 2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
}

var paragraph = document.getElementsByTagName('p')[0];

function textEffect(animationName) {
  var text = paragraph.innerHTML,
		chars = text.length,
		newText = '',
		animation = animationName,
		char,
		i;

	for (i = 0; i < chars; i += 1) {
		newText += '<i>' + text.charAt(i) + '</i>';
	}

	paragraph.innerHTML = newText;

	var wrappedChars = document.getElementsByTagName('i'),
		wrappedCharsLen = wrappedChars.length,
		j = 0;

	function addEffect () {
		setTimeout(function () {
			wrappedChars[j].className = animation;
			j += 1;
			if (j < wrappedCharsLen) {
				addEffect();
			}
		}, 100)
	}

	addEffect();
};

textEffect('fly-in-out');

Run Pen

This Pen is owned by Neil Carpenter on CodePen.

See more by @neilcarpenter on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.