animated logo

logo.css

.logo-animation {
  font-family: Courier;
  }

#site-title {
  text-indent: -9999px;
  line-height: 0px;
}

.cursor {
  -webkit-animation: blink  0.5s alternate infinite;
  -moz-animation:    blink  0.5s alternate infinite;
  -o-animation:      blink  0.5s alternate infinite;
  animation:         blink  0.5s alternate infinite;
  border-left: 5px solid #E82C0C;
  margin-left: 10px;

}

@-webkit-keyframes blink {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }

    @-moz-keyframes blink {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }

    @-o-keyframes blink {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }

    @keyframes blink {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }

logo.html

<h1>
	<a class="navbar-brand" title="<?php echo get_bloginfo('description'); ?>" href="<?php echo home_url(); ?>">
		> <span class="logo-animation"></span><span class="cursor"></span><div id = "site-title">Learn to Code With Me</div>
	</a>
</h1>

logo.js

(function($, window, document) {
	$(function() {
		var LOGO = LOGO || {};
		LOGO = {
			elements: {
				container: $('.logo-animation'),
				cursor: $('.cursor')
			},
			showText: function(target, message, index, interval) {
				var that = this;
				if(index < message.length) {
					target.append(message[index++])
					setTimeout(function() {
						that.showText(target, message, index, interval);
					}, interval);
				}
			},

			ifMobile: function() {
				this.elements.container.text("")//clear it first to remove >
				this.elements.container.text("Learn To Code With Me");
				this.elements.container.css({
					'width': 'auto'
				});
				this.elements.cursor.hide()
			},

			init: function() {
				var that = this;
				if($(window).width() >= 400) {
					that.showText(this.elements.container, "Learn To Code With Me", 0, 50);
				} else {
					that.ifMobile();
				}
			}
		};
		$(document).ready(LOGO.init());
	});
}(window.jQuery, window, document));