Simple CSS Crawling text marquee Animation

* { padding:0; margin:0; }
body, html { width:100%; height:100%; font-family:"Droid Sans", arial, verdana, sans-serif; font-weight:700; color:#fff; overflow:hidden; background: #000000;}
p#start { position:relative; width:16em; font-size:200%; font-weight:400; margin:20% auto; color:#ff0; opacity:0;
z-index:1; -webkit-animation:intro 2s ease-out; -moz-animation:intro 2s ease-out; -ms-animation:intro 2s ease-out;
-o-animation:intro 2s ease-out; animation:intro 2s ease-out; }
@-webkit-keyframes intro { 0% { opacity:1; } 90% { opacity:1; } 100% { opacity:0; } }
@-moz-keyframes intro { 0% { opacity:1; } 90% { opacity:1; } 100% { opacity:0; } }
@-ms-keyframes intro { 0% { opacity:1; } 90% { opacity:1; } 100% { opacity:0; } }
@-o-keyframes intro { 0% { opacity:1; } 90% { opacity:1; } 100% { opacity:0; } }
@keyframes intro { 0% { opacity:1; } 90% { opacity:1; } 100% { opacity:0; } }
h1 { position:absolute; width:2.6em; left:50%; top:25%; font-size:10em; text-align:center; margin-left:-1.3em; line-height:0.8em; letter-spacing:-0.05em;
color:#000; text-shadow:-2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; opacity:0; z-index:1;
-webkit-animation:logo 5s ease-out 2.5s; -moz-animation:logo 5s ease-out 2.5s; -ms-animation:logo 5s ease-out 2.5s;
-o-animation:logo 5s ease-out 2.5s; animation:logo 5s ease-out 2.5s; }
h1 sub { display:block; font-size:0.3em; letter-spacing:0; line-height:0.8em; }
@-webkit-keyframes logo { 0% { -webkit-transform:scale(1); opacity:1; } 50% { opacity:1; } 100% { -webkit-transform:scale(0.1); opacity:0; } }
@-moz-keyframes logo { 0% { -moz-transform:scale(1); opacity:1; } 50% { opacity:1; } 100% { -moz-transform:scale(0.1); opacity:0; } }
@-ms-keyframes logo { 0% { -ms-transform:scale(1); opacity:1; } 50% { opacity:1; } 100% { -ms-transform:scale(0.1); opacity:0; } }
@-o-keyframes logo { 0% { -o-transform:scale(1); opacity:1; } 50% { opacity:1; } 100% { -o-transform:scale(0.1); opacity:0; } }
@keyframes logo { 0% { transform:scale(1); opacity:1; } 50% { opacity:1; } 100% { transform:scale(0.1); opacity:0; } }
/* the interesting 3D scrolling stuff */
#titles { position:absolute; width:18em; height:50em; bottom:0; left:50%; margin-left:-9em; font-size:350%; text-align:justify;
overflow:hidden; -webkit-transform-origin:50% 100%; -moz-transform-origin:50% 100%; -ms-transform-origin:50% 100%; -o-transform-origin:50% 100%;
transform-origin:50% 100%; -webkit-transformerspective(300px) rotateX(25deg); -moz-transformerspective(300px) rotateX(25deg);
-ms-transformerspective(300px) rotateX(25deg); -o-transformerspective(300px) rotateX(25deg); transformerspective(300px) rotateX(25deg); }
#titles:after { position:absolute; content:' '; left:0; right:0; top:0; bottom:60%; pointer-events:none;
background-image:-webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image:-moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image:-ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image:-o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image:linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); }
#titles p { text-align:justify; margin:0.8em 0; }
#titles p.center { text-align:center; }
#titles a { color:#ff6; text-decoration:underline; }
#titlecontent { position:absolute; top:100%; -webkit-animation:scroll 100s linear 2s infinite; -moz-animation:scroll 100s linear 2s infinite;
-ms-animation:scroll 100s linear 2s infinite; -o-animation:scroll 100s linear 2s infinite; animation:scroll 100s linear 2s infinite; }
/* animation */
@-webkit-keyframes scroll { 0% { top:100%; } 100% { top:-170%; } }
@-moz-keyframes scroll { 0% { top:100%; } 100% { top:-170%; } }
@-ms-keyframes scroll { 0% { top:100%; } 100% { top:-170%; } }
@-o-keyframes scroll { 0% { top:100%; } 100% { top:-170%; } }
@keyframes scroll { 0% { top:100%; } 100% { top:-170%; } }

<p id="start">This is Not only CSS Style this is Muthujoo Style</p>
<h1>Muthujoo_Muthukumar</h1>
<div id="titles">
<div id="titlecontent">
<p class="center">Muthujoo<br />Muthukumarjoo</p>
<p>Hiox is a leading web service provider & content management company in India which focuses on providing cost effective and easy online web & content management product and services like web hosting, domain registration, business solutions, software/application development, web content development, internet solutions and web design, without compromising the quality.</p>
<p class="center">Muthujoo<br />Muthukumarjoo</p>
<p>Hiox is a leading web service provider & content management company in India which focuses on providing cost effective and easy online web & content management product and services like web hosting, domain registration, business solutions, software/application development, web content development, internet solutions and web design, without compromising the quality.</p>
<p class="center">Muthujoo<br />Muthukumarjoo</p>
<p>Hiox is a leading web service provider & content management company in India which focuses on providing cost effective and easy online web & content management product and services like web hosting, domain registration, business solutions, software/application development, web content development, internet solutions and web design, without compromising the quality.</p>
<p class="center">Muthujoo<br />Muthukumarjoo</p>
<p>Hiox is a leading web service provider & content management company in India which focuses on providing cost effective and easy online web & content management product and services like web hosting, domain registration, business solutions, software/application development, web content development, internet solutions and web design, without compromising the quality.</p>
<p class="center">Muthujoo<br />Muthukumarjoo</p>
<p>Hiox is a leading web service provider & content management company in India which focuses on providing cost effective and easy online web & content management product and services like web hosting, domain registration, business solutions, software/application development, web content development, internet solutions and web design, without compromising the quality.</p>
<p class="center">Muthujoo<br />Muthukumarjoo</p>
</div>
</div>

Tagged in:

• crawling
• css crawling
• css animation
• marquee animation