CSS3 Text Animation Effect 2

Developer
Nick Mkrtchyan
Size
3,367 Kb
Views
26,312
  1. CSS3 Text Animation Effect 2 Previews
  2. CSS3 Text Animation Effect 2 HTML Codes
  3. CSS3 Text Animation Effect 2 CSS Codes

How do I make an css3 text animation effect 2?

What is a css3 text animation effect 2? How do you make a css3 text animation effect 2? This script and codes were developed by Nick Mkrtchyan on 10 November 2022, Thursday.

CSS3 Text Animation Effect 2 Previews
IQ Test

CSS3 Text Animation Effect 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<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>

CSS3 Text Animation Effect 2 - Script Codes CSS Codes

@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);	}
}
CSS3 Text Animation Effect 2 - Script Codes
CSS3 Text Animation Effect 2 - Script Codes
Home Page Home
Developer Nick Mkrtchyan
Username Sonick
Uploaded November 10, 2022
Rating 4
Size 3,367 Kb
Views 26,312
Do you need developer help for CSS3 Text Animation Effect 2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nick Mkrtchyan (Sonick) Script Codes
Name
Canvas Background Effect 3
Slider
3D Gallery
Animan CSS3
Canvas Background Effect
Canvas Hover Effect
Mozilla DevDerby
404 Monster Error
Pure Css3 Menu
3D Menu
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!