Matrix Text Animation CSS3
----------------------------------------------- DEMO ---------------------------------------------------
----------------------------------------------- CSS3 ---------------------------------------------------
.wraper { width:800px; height:500px; background:url(bg.jpg) no-repeat; }
#matrix { color:#00deff; width:100%; height:500px; overflow:hidden; text-shadow:rgba(255, 255, 255, .
0px 0px 4px; position:relative; }
#matrix div { position:absolute; top:0; text-transform:lowercase; -webkit-transform:rotate(90deg);-webkit-animation-name:falling, fadeing;
-webkit-animation-timing-function:ease-out; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:normal; -moz-transform:rotate(90deg);
-moz-animation-name:falling, fadeing; -moz-animation-timing-function:ease-out; -moz-animation-iteration-count:infinite; -moz-animation-direction:normal; }
@-webkit-keyframes fadeing { 0% { opacity:1; } 100% { opacity:0; } }
@-webkit-keyframes falling { from {top:-250px;} to {top:500px;} }
@-moz-keyframes fadeing { 0% { opacity:1; } 100% { opacity:0; } }
@-moz-keyframes falling { from {top:-250px;} to {top:500px;} }
.text1 { -webkit-animation-duration:5s; -moz-animation-duration:5s; font:bold 14px Verdana, Geneva, sans-serif; }
.text2 { -webkit-animation-duration:10s; -moz-animation-duration:10s; font:bold 14px Georgia, "Times New Roman", Times, serif; }
.text3 { -webkit-animation-duration:15s; -moz-animation-duration:15s; font:bold 14px "Courier New", Courier, monospace; }
.text4 { -webkit-animation-duration:20s; -moz-animation-duration:20s; font:bold 14px Arial, Helvetica, sans-serif; }
.text5 { -webkit-animation-duration:25s; -moz-animation-duration:25s; font:bold 14px Tahoma, Geneva, sans-serif; }
----------------------------------------------- HTML5 --------------------------------------------------
<div class="wraper">
<div id="matrix">
<div class="text2" style="left:-200px;">Text Scrolling Effect Css3 by Muthujoo</div>
<div class="text1" style="left:-150px;">Text Falling Effect Css3 by Muthujoo</div>
<div class="text3" style="left:-100px;">Matrix Text Effect Css3 by Muthujoo</div>
<div class="text5" style="left:-50px;">Text Falling Animation Css3 by Muthujoo</div>
<div class="text2" style="left:20px;">Matrix Text Animation Css3 by Muthujoo</div>
<div class="text1" style="left:2px;">Text Falling Effect Css3 by Muthujoo</div>
<div class="text5" style="left:25px;">Matrix Text Effect Css3 by Muthujoo</div>
<div class="text1" style="left:60px;">Text Falling Animation Css3 by Muthujoo</div>
<div class="text2" style="left:80px;">Matrix Text Animation Css3 by Muthujoo</div>
<div class="text4" style="left:110px;">Text Scrolling Effect Css3 by Muthujoo</div>
<div class="text2" style="left:140px;">Text Falling Effect Css3 by Muthujoo</div>
<div class="text3" style="left:170px;">Matrix Text Effect Css3 by Muthujoo</div>
<div class="text1" style="left:185px;">Text Falling Animation Css3 by Muthujoo</div>
<div class="text3" style="left:200px;">Matrix Text Animation Css3 by Muthujoo</div>
<div class="text5" style="left:250px;">Text Scrolling Effect Css3 by Muthujoo</div>
<div class="text2" style="left:290px;">Text Falling Effect Css3 by Muthujoo</div>
<div class="text3" style="left:310px;">Matrix Text Effect Css3 by Muthujoo</div>
<div class="text5" style="left:350px;">Text Falling Animation Css3 by Muthujoo</div>
<div class="text4" style="left:390px;">Matrix Text Animation Css3 by Muthujoo</div>
<div class="text2" style="left:430px;">Text Scrolling Effect Css3 by Muthujoo</div>
<div class="text1" style="left:470px;">Text Falling Effect Css3 by Muthujoo</div>
<div class="text3" style="left:490px;">Matrix Text Effect Css3 by Muthujoo</div>
<div class="text5" style="left:520px;">Text Falling Animation Css3 by Muthujoo</div>
<div class="text2" style="left:550px;">Matrix Text Animation Css3 by Muthujoo</div>
</div>
</div>
----------------------------------------------- IMAGES--------------------------------------------------
