CSS3 transition: typewriting html <p> sequentially-Collection of common programming errors

• CSS:

  span.typewrite {
         opacity: 0;
          -webkit-transition-property: opacity;
          -webkit-transition-duration: 0s;
          -webkit-transition-timing-function: linear;
      }
  

• javascript:

          window.onload = function() {
  
          var setTypeWrite = function(arr) {
                  var     p, txt, span, t = 0;
  
              for (var a = 0; a < arr.length; a++) {
                  p = document.querySelector(arr[a]);
                  txt = p.innerText;
                  p.innerText = "";
  
                  for (var i = 0; i < txt.length; i ++)
                  {
                      span = document.createElement("span");
                      span.className = "typewrite";
                      span.appendChild(document.createTextNode(txt.substr(i, 1)));
                      span.style["-webkit-transition-delay"] = parseFloat(t * 0.15).toString() + "s";
                      p.appendChild(span);
                      t++;
                  }
              }
          };          
  
          var startTypeWrite = function(arr) {
              var spans;
              for (var i = 0; i < arr.length; i++)
              {
                  spans = document.querySelectorAll(arr[i]);
                  for (var s = 0; s < spans.length; s++) {
                      spans[s].style.opacity = "1";
                  }
              }
          };              
  
          setTypeWrite(["#text1", "#text2", "#text3", "#dummy"]);                         
          startTypeWrite(["#text1 span.typewrite", "#text2 span.typewrite", "#text3 span.typewrite", "#dummy"]);
  
      };
  

• HTML body:

  
  text one...
  
  
  
  text two...
  
  
  
  text three
  
  
  
  
  
  
  

Originally posted 2013-11-09 21:18:23.