<div id="container">
    <div id="input"></div>
    <input type="text" id="hiddenInput">
</div> 

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);

    body {
        background-color: #000000;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 40px;
        color: #ffffff;
    }

    #hiddenInput {
        font-size: 40px;
        font-family: 'Roboto Condensed', sans-serif;
        background-color: #808080;
        position: absolute;
        opacity: 0.4;
        margin-top: -22px;
        margin-left: -125px;
        opacity: 0;
        filter: alpha(opacity = 0);
    }

    #container {
        position: absolute;
        top: 80px;
        left: 50%;
    }

    #input {
        position: absolute;
        margin-top: -20px;
        margin-left: -120px;
    }

    .letterContainer {
        display: inline;
        white-space: nowrap;
    }

    .letterStatic {
        display: inline;
    }

    .letterAnimTop {
        display: inline;
        position: absolute;
        -webkit-animation: dropTop .1s ease;
        -moz-animation: dropTop .1s ease;

    }

    .letterAnimBottom {
        display: inline;
        position: absolute;
        -webkit-animation: dropBottom .1s ease;
        -moz-animation: dropBottom .1s ease;
    }

    .blink {
        position: static;
        top: -5px;
        -webkit-animation: blink 0.3s ease 0 infinite alternate;
        -moz-animation: blink 0.3s ease 0 infinite alternate;
    }

    @-moz-keyframes blink {
        from { opacity: 0 }
        to { opactiy: 1 }
    }

    @-webkit-keyframes blink {
        from { opacity: 0 }
        to { opactiy: 1 }
    }

    @-moz-keyframes dropTop {
        from {
            -moz-transform: translateX(0) translateY(-20px) translateZ(20px) rotateX(90deg);
            transform: translateX(0) translateY(-20px) translateZ(20px) rotateX(90deg);
        }

        to {
            -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);
            transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);
        }
    }

    @-moz-keyframes dropBottom {
        from {
            -moz-transform: translateY(20px) translateZ(20px) rotateX(-90deg);
            transform: translateY(20px) translateZ(20px) rotateX(-90deg);
        }

        to {
            -moz-transform: rotateX(0deg);
            transform: rotateX(0deg);
        }
    }

    @-webkit-keyframes dropTop {
        from { -webkit-transform: translateX(0) translateY(-20px) translateZ(20px) rotateX(90deg); }
        to { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg); }
}

    @-webkit-keyframes dropBottom {
        from { -webkit-transform: translateY(20px) translateZ(20px) rotateX(-90deg); }
        to { -webkit-transform: rotateX(0deg); }
    }

var input;
var cursor;
var hiddenInput;
var content = [];
var lastContent = "", targetContent = "";
var inputLock = false;
var autoWriteTimer;

var isMobile, isIE;

window.onload = function() {

    isMobile = navigator && navigator.platform && navigator.platform.match(/^(iPad|iPod|iPhone)$/);

    isIE = (navigator.appName == 'Microsoft Internet Explorer');

    input = document.getElementById('input');

    hiddenInput = document.getElementById('hiddenInput');
    hiddenInput.focus();

    cursor = document.createElement('cursor');
    cursor.setAttribute('class', 'blink');
    cursor.innerHTML = "|";

    if (!isMobile && !isIE) input.appendChild(cursor);

    function refresh() {

        inputLock = true;

        if (targetContent.length - lastContent.length == 0) return;

        var v = targetContent.substring(0, lastContent.length + 1);

        content = [];

        var blinkPadding = false;

        for (var i = 0; i < v.length; i++) {
            var l = v.charAt(i);

            var d = document.createElement('div');
            d.setAttribute('class', 'letterContainer');

            var d2 = document.createElement('div');

            var animClass = (i % 2 == 0) ? 'letterAnimTop' : 'letterAnimBottom';

            var letterClass = (lastContent.charAt(i) == l) ? 'letterStatic' : animClass;

            if (letterClass != 'letterStatic') blinkPadding = true;

            d2.setAttribute('class', letterClass);

            d.appendChild(d2);

            d2.innerHTML = l;
            content.push(d);
        }

        input.innerHTML = '';

        for (var i = 0; i < content.length; i++) {
            input.appendChild(content[i]);
        }

        cursor.style.paddingLeft = (blinkPadding) ? '22px' : '0';

        if (!isMobile && !isIE) input.appendChild(cursor);

        if (targetContent.length - lastContent.length > 1) setTimeout(refresh, 150);
        else inputLock = false;

        lastContent = v;
    }

    if (document.addEventListener) {

        document.addEventListener('touchstart', function(e) {
            clearInterval(autoWriteTimer);
            targetContent = lastContent;
        }, false);

        document.addEventListener('click', function(e) {
            clearInterval(autoWriteTimer);
            targetContent = lastContent;
            hiddenInput.focus();
        }, false);

        if (!isIE) {
            // Input event is buggy on IE, so don't bother
            // (https://msdn.microsoft.com/en-us/library/gg592978(v=vs.85).aspx#feedback)
            // We will use a timer instead (below)
            hiddenInput.addEventListener('input', function(e) {
                e.preventDefault();
                targetContent = hiddenInput.value;
                if (!inputLock) refresh();

            }, false);
        } else {
            setInterval(function() {
                targetContent = hiddenInput.value;

                if (targetContent != lastContent && !inputLock) refresh();
            }, 100);
        }

    }

    hiddenInput.value = "";

    autoWriteTimer = setTimeout(function() {
        if (lastContent != "") return;
        targetContent = "type something...";
        refresh();
    }, 2000);
}