<div>CSS Points</div>
<div>
	<span>Text Animation Effects</span>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto:300');

body {
	text-align: center;
	background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
	color: #555;
	font-family: 'Roboto';
	font-weight: 300;
	font-size: 32px;
	padding-top: 40vh;
	height: 100vh;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0, 0, 0);
}
div {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
}
div:first-of-type {
	animation: showup 7s infinite;
}
div:last-of-type {
	width: 0px;
	animation: reveal 7s infinite;
}
div:last-of-type span {
	margin-left: -355px;
	animation: slidein 7s infinite;
}
@keyframes showup {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes slidein {
	0% {
		margin-left: -800px;
	}
	20% {
		margin-left: -800px;
	}
	35% {
		margin-left: 0px;
	}
	100% {
		margin-left: 0px;
	}
}

@keyframes reveal {
	0% {
		opacity: 0;
		width: 0px;
	}
	20% {
		opacity: 1;
		width: 0px;
	}
	30% {
		width: 355px;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		width: 355px;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.