css3 text animation

Text Hover Effects CSS3 Animated

Chhsov Graham

A tutorial that shows you how to create css3 text hover effect seen on the website. Using transforms, transitions and animations, the aim is to use smooth effect on text style. It seem like flash animation effects but it used only css3 style.

freshDesignweb-CSS3-Text-Animateddemo download

Today we would like to show how to create the useful text animated. If you haven’t seen the website, you should definitely go and check it out; it’s full of interesting and creative effects.  This example really nice effect which we will re-implement today using  transforms, transitions and animations.

Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

Let’s start with the HTML

The Markup

The CSS3 Text Hover Effects HTML will have the following structure:

     <div class="bg_text"> 
            <h2 class="textAnimated animated In bounceIn">					
              <span class="textAnimated-cut"><span class="word1">freshDesignweb</span> 
              <span class="word2"></span> <span class="word3"></span> <span class="word4"></span> <span class="word5"></span> <span class="word6"></span> <span class="word7"></span> <span class="word8"></span> <span class="word9"></span> <span class="word10"></span> <span class="word11"></span> <span class="word12"></span> <span class="word13"></span> <span class="word14"></span> <span class="word15"></span> </span>					
              <span class="textAnimated-mid">Best Web Design Blog</span>					
              <span class="textAnimated-cut"><span class="word1">freshDesignweb</span> 
               <span class="word2"></span> <span class="word3"></span> <span class="word4"></span> <span class="word5"></span> <span class="word6"></span> <span class="word7"></span> <span class="word8"></span> <span class="word9"></span> <span class="word10"></span> <span class="word11"></span> <span class="word12"></span> <span class="word13"></span> <span class="word14"></span> <span class="word15"></span> </span>				
            </h2>        
	</div> 

The Cascading Style Sheets (CSS) will have the following structure:

.bg_text{
background-color: #D3304D;
width:100%;
}
.Out {
	opacity: 0;
	transform: scaleY(0);
}
.In {
	opacity: 1;
	transform: scaleY(1);
}
.main {
	position: relative;
}
.desc {
	position: relative;
	z-index: 100;
	border-top:1px dotted #cccccc;
	margin-top:40px;
}

.textAnimated {
	width: auto;
	margin: 0px auto;
	cursor: default;
	animation: fadeIn 0.6s ease-in-out 2s;
	animation-fill-mode: forwards;
}
.textAnimated > span {
	display: block;
	-webkit-backface-visibility: hidden;
}
.textAnimated-cut {
	width: 100%;
	height: 60px;
	overflow: hidden;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.textAnimated-cut span {
	display: block;
	line-height: 120px;
	color: rgba(255,255,255,0.9);
	font-size: 50px;
	margin-top: 6px;
	letter-spacing: -2px;
	font-family: 'Days One', cursive;
	text-shadow: 0px 2px 4px rgba(255,255,255,0.5);
}
.textAnimated-cut:last-child span {
	margin-top: -54px;
}
.textAnimated-mid {
	font-family: 'Days One', cursive;
	font-size: 30px;
	letter-spacing: 3px;
	line-height: 40px;
	text-indent: 20px;
	position: absolute;
	top: 50%;
	margin-top: -20px;
	width: auto;
	color: rgba(255,255,255,0.5);
	opacity: 0;
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	-o-transform: scale(0.3);
	-ms-transform: scale(0.3);
	transform: scale(0.3);
	-webkit-transition: all 0.6s ease-in-out 0s;
	-moz-transition: all 0.6s ease-in-out 0s;
	-o-transition: all 0.6s ease-in-out 0s;
	-ms-transition: all 0.6s ease-in-out 0s;
	transition: all 0.6s ease-in-out 0s;
}
.textAnimated:hover .textAnimated-cut:first-child {
	-webkit-transform: translateY(-40px);
	-moz-transform: translateY(-40px);
	-o-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
	transform: translateY(-40px);
	opacity: 0;
}
.textAnimated:hover .textAnimated-cut:last-child {
	-webkit-transform: translateY(40px);
	-moz-transform: translateY(40px);
	-o-transform: translateY(40px);
	-ms-transform: translateY(40px);
	transform: translateY(40px);
	opacity: 0;
}
.textAnimated:hover .textAnimated-mid {
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	-ms-transition-delay: 0.6s;
	transition-delay: 0.6s;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

Now! We have a nice CSS3 text hover effects . Check out the demo below, and feel free to download this example for future use. I hope you enjoyed this tutorial and find it useful!

demo | Download (1841)

Written by

Graham Bill has been a professional web developer and designer with more experience on coding HTML5, CSS3, php, javascript, jquery, ajax, jsp, XML, MySQL, SEO and especially on development joomla templates and wordpress themes.

Feedback Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *