CSS3 Text Animation Tutorial

CSS3 animation has become more popular in instead of flash. So in this tutorial, we will show you aweone example CSS3 text animation to help to create more text style as you like it. Animations consist of two components, CSS selector called nth-child and a set of keyframes that indicate the start and end states of the animation’s style. You will tree sample style of text animation style in demo view.

You may this post:

css3-text-animation-demoDemo1 | Demo2 | Demo3 | Download (1197)

Let’s go with my tutorial coding bellow:

The Markup Language

The HTML structure CSS3 Text Animation will have the following code:

        <ul class="text-animation">
            <li><h3>Text 1</h3></li>
            <li><h3>Text 2</h3></li>
            <li><h3>Text 3</h3></li>
            <li><h3>Text 4</h3></li>
            <li><h3>Text 5</h3></li>
        </ul>

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

.text-animation,
.text-animation:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.text-animation li{
    z-index: 1000;
    position: absolute;
    bottom: 295px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: textAnimation 20s linear infinite 0s;
    -moz-animation: textAnimation 20s linear infinite 0s;
    -o-animation: textAnimation 20s linear infinite 0s;
    -ms-animation: textAnimation 20s linear infinite 0s;
    animation: textAnimation 20s linear infinite 0s;
}
.text-animation li h3 {
    font-family: 'Open Sans Condensed', sans-serif;
	text-transform:uppercase;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
	color:#390;
}
.text-animation li:nth-child(2){
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s;
}
.text-animation li:nth-child(3){
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
}
.text-animation li:nth-child(4) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.text-animation li:nth-child(5) {
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s;
}
.text-animation li:nth-child(6) {
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}

/* Animation for the text */
@-webkit-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -webkit-transform: translateY(200px);
	}
	10% {
	    opacity: 1;
	    -webkit-transform: translateY(0px);
	}
	20% {
	    opacity: 1;
	    -webkit-transform: scale(1);
	}
	23% { opacity: 0 }
	27% {
	    opacity: 0;
	    -webkit-transform: scale(10);
	}
	100% { opacity: 0 }
}
@-moz-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -moz-transform: translateY(200px);
	}
	10% {
	    opacity: 1;
	    -moz-transform: translateY(0px);
	}
	20% {
	    opacity: 1;
	    -moz-transform: scale(1);
	}
	23% { opacity: 0 }
	27% {
	    opacity: 0;
	    -moz-transform: scale(10);
	}
	100% { opacity: 0 }
}
@-o-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -o-transform: translateY(200px);
	}
	10% {
	    opacity: 1;
	    -o-transform: translateY(0px);
	}
	20% {
	    opacity: 1;
	    -o-transform: scale(1);
	}
	23% { opacity: 0 }
	27% {
	    opacity: 0;
	    -o-transform: scale(10);
	}
	100% { opacity: 0 }
}
@-ms-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -ms-transform: translateY(200px);
	}
	10% {
	    opacity: 1;
	    -ms-transform: translateY(0px);
	}
	20% {
	    opacity: 1;
	    -ms-transform: scale(1);
	}
	23% { opacity: 0 }
	27% {
	    opacity: 0;
	    -webkit-transform: scale(10);
	}
	100% { opacity: 0 }
}
@keyframes textAnimation { 
	0% {
	    opacity: 0;
	    transform: translateY(200px);
	}
	10% {
	    opacity: 1;
	    transform: translateY(0px);
	}
	20% {
	    opacity: 1;
	    transform: scale(1);
	}
	23% { opacity: 0 }
	27% {
	    opacity: 0;
	    transform: scale(10);
	}
	100% { opacity: 0 }
}

The Cascading Style Sheets (CSS) Example 2 will have the following code:

.text-animation,
.text-animation:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.text-animation li{
    z-index: 1000;
    position: absolute;
    bottom: 300px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: textAnimation 20s linear infinite 0s;
    -moz-animation: textAnimation 20s linear infinite 0s;
    -o-animation: textAnimation 20s linear infinite 0s;
    -ms-animation: textAnimation 20s linear infinite 0s;
    animation: textAnimation 20s linear infinite 0s;
}
.text-animation li h3 {
    font-family: 'Open Sans Condensed', sans-serif;
	text-transform:uppercase;
    font-size: 240px;
    padding: 0 30px;
    line-height: 120px;
    color:#F00;
}
.text-animation li:nth-child(2){
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s;
}
.text-animation li:nth-child(3){
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
}
.text-animation li:nth-child(4){
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.text-animation li:nth-child(5){
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s;
}
.text-animation li:nth-child(6){
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
@-webkit-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -webkit-transform: translateY(-200%);
	}
	10% {
	    opacity: 1;
	    -webkit-transform: translateY(0%);
	}
	20% {
	    opacity: 1;
	    -webkit-transform: translateY(0%);
	}
	23% {
	    opacity: 0;
	    -webkit-transform: translateY(100%);
	}
	26% { opacity: 0 }
	100% { opacity: 0 }
}
@-moz-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -moz-transform: translateY(-200%);
	}
	10% {
	    opacity: 1;
	    -moz-transform: translateY(0%);
	}
	20% {
	    opacity: 1;
	    -moz-transform: translateY(0%);
	}
	23% {
	    opacity: 0;
	    -moz-transform: translateY(100%);
	}
	26% { opacity: 0 }
	100% { opacity: 0 }
}
@-o-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -o-transform: translateY(-200%);
	}
	10% {
	    opacity: 1;
	    -o-transform: translateY(0%);
	}
	20% {
	    opacity: 1;
	    -o-transform: translateY(0%);
	}
	23% {
	    opacity: 0;
	    -o-transform: translateY(100%);
	}
	26% { opacity: 0 }
	100% { opacity: 0 }
}
@-ms-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -ms-transform: translateY(-200%);
	}
	10% {
	    opacity: 1;
	    -ms-transform: translateY(0%);
	}
	20% {
	    opacity: 1;
	    -ms-transform: translateY(0%);
	}
	23% {
	    opacity: 0;
	    -ms-transform: translateY(100%);
	}
	26% { opacity: 0 }
	100% { opacity: 0 }
}
@keyframes textAnimation { 
	0% {
	    opacity: 0;
	    transform: translateY(-200%);
	}
	10% {
	    opacity: 1;
	    transform: translateY(0%);
	}
	20% {
	    opacity: 1;
	    transform: translateY(0%);
	}
	23% {
	    opacity: 0;
	    transform: translateY(100%);
	}
	26% { opacity: 0 }
	100% { opacity: 0 }
}

The Cascading Style Sheets (CSS) Example 3 will have the following code:

.text-animation,
.text-animation:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.text-animation li{
    z-index: 1000;
    position: absolute;
    bottom: 300px;
    left: 0px;
    width: 100%;
    text-align: right;
    opacity: 0;
    -webkit-animation: textAnimation 20s linear infinite 0s;
    -moz-animation: textAnimation 20s linear infinite 0s;
    -o-animation: textAnimation 20s linear infinite 0s;
    -ms-animation: textAnimation 20s linear infinite 0s;
    animation: textAnimation 20s linear infinite 0s;
}
.text-animation li h3 {
    font-family: 'Open Sans Condensed', sans-serif;
	text-transform:uppercase;
    font-size: 240px;
    padding: 0 400px;
    line-height: 120px;
    color:#F90;
}
.text-animation li:nth-child(2){
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s;
}
.text-animation li:nth-child(3){
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
}
.text-animation li:nth-child(4){
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.text-animation li:nth-child(5){
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s;
}
.text-animation li:nth-child(6){
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
@-webkit-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -webkit-transform: translateX(200px);
	}
	8% {
	    opacity: 1;
	    -webkit-transform: translateX(0px);
	}
	17% {
	    opacity: 1;
	    -webkit-transform: translateX(0px);
	}
	19% {
	    opacity: 0;
	    -webkit-transform: translateX(-300px);
	}
	25% { opacity: 0 }
	100% { opacity: 0 }
}
@-moz-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -moz-transform: translateX(200px);
	}
	8% {
	    opacity: 1;
	    -moz-transform: translateX(0px);
	}
	17% {
	    opacity: 1;
	    -moz-transform: translateX(0px);
	}
	19% {
	    opacity: 0;
	    -moz-transform: translateX(-300px);
	}
	25% { opacity: 0 }
	100% { opacity: 0 }
}
@-o-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -o-transform: translateX(200px);
	}
	8% {
	    opacity: 1;
	    -o-transform: translateX(0px);
	}
	17% {
	    opacity: 1;
	    -o-transform: translateX(0px);
	}
	19% {
	    opacity: 0;
	    -o-transform: translateX(-300px);
	}
	25% { opacity: 0 }
	100% { opacity: 0 }
}
@-ms-keyframes textAnimation { 
	0% {
	    opacity: 0;
	    -ms-transform: translateX(200px);
	}
	8% {
	    opacity: 1;
	    -ms-transform: translateX(0px);
	}
	17% {
	    opacity: 1;
	    -ms-transform: translateX(0px);
	}
	19% {
	    opacity: 0;
	    -ms-transform: translateX(-300px);
	}
	25% { opacity: 0 }
	100% { opacity: 0 }
}
@keyframes textAnimation { 
	0% {
	    opacity: 0;
	    transform: translateX(200px);
	}
	8% {
	    opacity: 1;
	    transform: translateX(0px);
	}
	17% {
	    opacity: 1;
	    transform: translateX(0px);
	}
	19% {
	    opacity: 0;
	    transform: translateX(-300px);
	}
	25% { opacity: 0 }
	100% { opacity: 0 }
}

Now! We have a beautiful CSS3 Text Animation. 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!

Written by Graham

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 3 Leave a comment
  1. thankvyou for posting tutorials I shall leave commenting until later when I’ve tried to use the lessons.

  2. Sir Graham Bill am so grateful for the code display here is being so helpful to me. Sir i humbly ask for you to send me tutorial on visual basic 6.0 or any other one you wish. Thanks once more for support and i wish and will like to you from you again.

Leave a Reply

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

Please check to comfirm

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>