Pure CSS Revealing Text Animation Effects

Animated Text Reveal Effect Create In Pure CSS. Previously I had shared CSS loader in Pure CSS.

You can check the live demo or also available source code, you can download source code or change as you like. If you want more details then visit here.

HTML

<div>CSS Points</div>
<div>
	<span>Text Animation Effects</span>
</div>

CSS

@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;
	}
}

One comment

  1. […] You can check the live demo or also download the source file. Change the all color as your like website. If you want more details about this css effects then visit here. My previous tutorial check and learn how to create CSS Revealing Text Animation Effects. […]

Leave a Reply