Ultimate Matrix Like Effect Using Pure CSS3

Published on November 4, 2012

Hi folks, How are you? I have a question for you. Have you ever watched The Matrix movie. I am sure there is very less people how didn’t. The movie was really amazing. The titles itself very attractive to me. Today I will explain you how to create such amazing matrix titles effect using pure css3.

HTML

<div id="matx">
  <div class="t1" style="left:2px;">
    Fancy News Head Lines Scroll Effect CSS3
  </div>
  <div class="t5" style="left:25px;">Create Twitter Like Follow Unfollow</div>
  <div class="t1" style="left:60px;">Image Zoom Effect With CSS3</div>
  <div class="t2" style="left:80px;">pure css3 with demo</div>
  <div class="t4" style="left:110px;">Ultimate Accordion Effect With CSS3</div>
  <div class="t2" style="left:140px;">how to create</div>
  <div class="t3" style="left:170px;">
    Live Image Crop Script With PHP Jquery
  </div>
  <div class="t1" style="left:185px;">createve web development</div>
  <div class="t3" style="left:200px;">Light Weight RSS Reader With PHP</div>
  <div class="t5" style="left:250px;">amazing windows7 menu with css3</div>
  <div class="t2" style="left:290px;">Live Image Resize Script With PHP</div>
  <div class="t3" style="left:310px;">
    Online Voting System With PHP And AJAX
  </div>
  <div class="t5" style="left:350px;">Create Slide Show With Pure CSS3</div>
  <div class="t4" style="left:390px;">News Head Lines Scroll Effect CSS3</div>
  <div class="t2" style="left:430px;">Create Amazing Mac Dock Using CSS3</div>
  <div class="t1" style="left:470px;">createve web development</div>
  <div class="t3" style="left:490px;">nice shadow effect</div>
  <div class="t5" style="left:520px;">amazing windows7 menu with css3</div>
  <div class="t2" style="left:550px;">Live Image Resize Script With PHP</div>
</div>

Here matx is main div in this we again going to have all  divs for text. I am taking some of my previous post titles as text. We applying different time-duration class _t1,t2,t3,t4,t5_to text divs. Read:Live Image Resize Script With PHP Styling

#matx {
  background: #000;
  color: rgba(0, 255, 0, 0.7);
  width: 100%;
  height: 388px;
  overflow: hidden;
  text-shadow: rgba(255, 255, 255, 0.8) 0px 0px 4px;
  position: relative;
}
@-webkit-keyframes fadeing {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes falling {
  from {
    top: -250px;
  }
  to {
    top: 388px;
  }
}
#matx 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;
}
.t1 {
  -webkit-animation-duration: 4s;
}
.t2 {
  -webkit-animation-duration: 6s;
}
.t3 {
  -webkit-animation-duration: 8s;
}
.t4 {
  -webkit-animation-duration: 10s;
}
.t5 {
  -webkit-animation-duration: 13s;
}

This code is very simple. We creating two keyframes fadeing and falling. fadeing class for opacity change. falling for moving top to bottom. We applying animation to all divs under matx div. Please observe we are not including animation-duration here. We will create the different duration in t1,t2,t3,t4,t5 classes. We applied these class in html. Note:Please note this code is only optimized for chrome. If you want it work in firefox  just replace -webkit- with _-moz-_That’s it. Please share it if you like it.