Text Hover Effects CSS3 Animated

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.

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!

Graham Bill's expertise in web design and his specialization in WordPress sites and blogs. With over a decade of experience, he likely possesses a deep understanding of the web design industry and the latest trends in WordPress development. Graham's blog, filled with helpful tips and tricks, is a valuable resource for those interested in improving their web design skills or optimizing their WordPress sites and blogs. Sharing his expertise through informative articles likely showcases his commitment to providing value to the web design community.