CSS3 Text Animation Effect 2

In this example below you will see how to do a CSS3 Text Animation Effect 2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Sonick, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Sonick ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS3 Text Animation Effect 2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="sp-container">
    <div class="sp-content">
        <div class="sp-wrap sp-left">
            <h2>
                <span class="sp-top">What if you wouldn't get</span> 
                <span class="sp-mid">spam</span> 
                <span class="sp-bottom">anymore?</span>
            </h2>
        </div>
        <div class="sp-wrap sp-right">
            <h2>
                <span class="sp-top">Wouldn't that be absolutely</span> 
                <span class="sp-mid">great<i>!</i><i>?</i></span> 
                <span class="sp-bottom">Yeah, it would!</span> 
            </h2>
        </div>
    </div>
    <div class="sp-full">
        <h2>A great way to get rid of spam!</h2>
        <a href="index3.html">Sign up now!</a>
    </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Sonick/css3-text-animation-effect-2-zqCok */
@import url('http://pcvector.net/uploads/demo/scripts/layout_and_interface/coming_soon_animation_css/css/fonts/fonts.css');
@import url('http://pcvector.net/uploads/demo/scripts/layout_and_interface/coming_soon_animation_css/css/reset.css');

/* General Demo Style */
body{
	background: #eee;
	color: rgba(255,255,255,1);
	font-family:'Myriad Pro', Arial, sans-serif;
	font-size: 15px;
}
a{
	color: #fff;
	text-decoration: none;
}
.container{
	width: 100%;
	position: relative;
	overflow:hidden;
}
.clr{
	clear: both;
}
h1.main{
	font-size: 30px;
	position:relative;
	font-weight: 400;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
    padding: 10px;
	text-align: center;
	z-index: 1000;
	-webkit-animation: appear 0.6s ease-in-out 6s backwards;
	-moz-animation: appear 0.6s ease-in-out 6s backwards;
}
/* Header Style */
.header{
	font-family:'Arial Narrow', Arial, sans-serif;
	line-height: 24px;
	font-size: 11px;
	background: #000;
	opacity: 0.9;
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	-moz-box-shadow: 1px 0px 2px #000;
	-webkit-box-shadow: 1px 0px 2px #000;
	box-shadow: 1px 0px 2px #000;
}
.header a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #ddd;
	display: block;
	float: left;
}
.header a:hover{
	color: #fff;
}
.header span.right{
	float: right;
}
.header span.right a{
	float: none;
	display: inline;
}
p.demos{
    position:relative;
    z-index: 1000;
	padding: 4px;
	text-align: center;
	-webkit-animation: appear 0.6s ease-in-out 6.2s backwards;
	-moz-animation: appear 0.6s ease-in-out 6.2s backwards;
}
p.demos a{
    display: inline-block;
	padding: 2px 4px;
	background: #fff;
	color: #777;
	font-family:'Arial Narrow', Arial, sans-serif;
	text-transform: uppercase;
	font-size: 11px;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
p.demos a:hover{
    color: #fff;
	background: #555;
}
p.demos a.current-demo,
p.demos a.current-demo:hover{
    font-weight: bold;
	background: #333;
	color: #fff;
}
@-webkit-keyframes appear{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-moz-keyframes appear{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

body {
	background: skyblue;
	font-family: 'MisoRegular';
}
h1.main,p.demos {
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 8s;
	-ms-animation-delay: 8s;
	animation-delay: 8s;
}
.sp-container {
	width: 900px;
	height: 400px;
	position: relative;
	margin: 80px auto 0px auto;
}
.sp-content {
	width: 100%;
	height: 400px;
	position: relative;
	-webkit-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
	-moz-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
	-ms-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
	animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
}
.sp-content:after {
	content: '';
	width: 4px;
	background: #000;
	height: 100%;
	position: absolute;
	left: 50%;
}
.sp-container h2 {
	color: #000;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.9);
}
.sp-wrap {
	width: 400px;
	padding: 0px 25px;
	height: 100%;
	text-align: right;
	font-size: 70px;
	line-height: 80px;
	float: left;
	position: relative;
	background: skyblue;
	overflow: hidden;
}
.sp-wrap span {
	display: block;
	background: skyblue;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
.sp-wrap span.sp-mid {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
.sp-container .sp-right h2 {
	color: #fff;
	text-shadow: 0px 0px 1px rgba(255,255,255,0.9);
}
.sp-wrap span.sp-mid {
	font-family: 'MisoBold';
	text-transform: uppercase;
	font-size: 160px;
	line-height: 130px;
	position: relative;
}
.sp-left span.sp-top {
	-webkit-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
	-moz-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
	-ms-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
	animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
}
.sp-left span.sp-mid {
	-webkit-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
	-moz-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
	-ms-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
	animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
}
.sp-left span.sp-bottom {
	-webkit-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
	-moz-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
	-ms-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
	animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
}
.sp-right span {
	text-align: left;
}
.sp-right span.sp-top {
	-webkit-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
	-moz-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
	-ms-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
	animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
}
.sp-right span.sp-mid {
	-webkit-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
	-moz-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
	-ms-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
	animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
}
.sp-right span.sp-bottom {
	-webkit-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
	-moz-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
	-ms-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
	animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
}
.sp-wrap i {
	position: absolute;
	background: skyblue;
	width: 60px;
}
.sp-wrap i:first-child {
	color: #000;
}
.sp-wrap i:last-child {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-animation: fadeOut 1s linear 6s backwards;
	-moz-animation: fadeOut 1s linear 6s backwards;
	-ms-animation: fadeOut 1s linear 6s backwards;
	animation: fadeOut 1s linear 6s backwards;
}
.sp-full {
	position: absolute;
	font-size: 67px;
	top: 142px;
	width: 700px;
	left: 145px;
	-webkit-animation: fadeIn 1s linear 6.6s backwards;
	-moz-animation: fadeIn 1s linear 6.6s backwards;
	-ms-animation: fadeIn 1s linear 6.6s backwards;
	animation: fadeIn 1s linear 6.6s backwards;
}
.sp-full a {
	background: #000;
	color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 10px 40px;
	display: inline-block;
	font-size: 40px;
	margin-top: 40px;
	-webkit-animation: zoomIn 0.7s ease-in-out 7s backwards;
	-moz-animation: zoomIn 0.7s ease-in-out 7s backwards;
	-ms-animation: zoomIn 0.7s ease-in-out 7s backwards;
	animation: zoomIn 0.7s ease-in-out 7s backwards;
}
.sp-full h2 {
	width: 400px;
	padding: 0px 50px 0px 0px;
	float: left;
	text-align: right;
}
.sp-full a:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
}
/**/
@-webkit-keyframes open{
	0%{
		-webkit-transform: scale(1,0);
	}
	100%{
		-webkit-transform: scale(1,1);
	}
}
@-webkit-keyframes squeeze{
	0%{
		height: 400px;
	}
	100%{
		height: 120px;
	}
}
@-webkit-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-webkit-keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-webkit-keyframes slideLeft{
	0%{
		-webkit-transform: translateX(120%);
	}
	100%{
		-webkit-transform: translateX(0%);
	}
}
@-webkit-keyframes slideRight{
	0%{
		-webkit-transform: translateX(-120%);
	}
	100%{
		-webkit-transform: translateX(0%);
	}
}
@-webkit-keyframes moveUp{
	0%{
		-webkit-transform: translateY(0px);
	}
	100%{
		-webkit-transform: translateY(-170px);
	}

}
@-webkit-keyframes zoomIn{
	0%{
		-webkit-transform: scale(0);
	}
	100%{
		-webkit-transform: scale(1);
	}
}
/**/
@-moz-keyframes open{
	0%{
		-moz-transform: scale(1,0);
	}
	100%{
		-moz-transform: scale(1,1);
	}
}
@-moz-keyframes squeeze{
	0%{
		height: 400px;
	}
	100%{
		height: 120px;
	}
}
@-moz-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-moz-keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-moz-keyframes slideLeft{
	0%{
		-moz-transform: translateX(120%);
	}
	100%{
		-moz-transform: translateX(0%);
	}
}
@-moz-keyframes slideRight{
	0%{
		-moz-transform: translateX(-120%);
	}
	100%{
		-moz-transform: translateX(0%);
	}
}
@-moz-keyframes moveUp{
	0%{
		-moz-transform: translateY(0px);
	}
	100%{
		-moz-transform: translateY(-170px);
	}

}
@-moz-keyframes zoomIn{
	0%{
		-moz-transform: scale(0);
	}
	100%{
		-moz-transform: scale(1);
	}
}
/**/
@keyframes open{
	0%{
		transform: scale(1,0);
	}
	100%{
		transform: scale(1,1);
	}
}
@keyframes squeeze{
	0%{
		height: 400px;
	}
	100%{
		height: 120px;
	}
}
@keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes slideLeft{
	0%{
		transform: translateX(120%);
	}
	100%{
		transform: translateX(0%);
	}
}
@keyframes slideRight{
	0%{
		transform: translateX(-120%);
	}
	100%{
		transform: translateX(0%);
	}
}
@keyframes moveUp{
	0%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(-170px);
	}

}
@keyframes zoomIn{
	0%{
		transform: scale(0);
	}
	100%{
		transform: scale(1);
	}
}

Comments