Создание анимированной мигающей неоновой вывески с использованием CSS

Демонстрация работы анимированной мигающей неоновой вывески, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<h1 id="neon-tubing">B<span>A</span>R</h1>

CSS

@font-face {
	font-family: 'Neon80sRegular';
	src: url('http://thenewcode.com/assets/fonts/neon-webfont.woff') format('woff'),
         url('http://thenewcode.com/assets/fonts/neon-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
h1#neon-tubing {
	padding: 3rem;
	text-align: center;
	font-family: Neon80sRegular, sans-serif;
	font-size: 5rem;
	letter-spacing: 1rem;
	background: url(http://thenewcode.com/assets/images/brick-wall-texture-faded.jpg);
	background-size: cover;
  color: #fee;
}
@keyframes neonspark  {
	0% {
		text-shadow: none;
	}
	30% {
		text-shadow: 0 0 30px rgba(255,0,84,0.6);
	}
	60% {
		text-shadow: 0 0 30px rgba(255,0,84,0.6),
		  0 0 60px rgba(255,0,84,0.4);
	}
	80% {
		text-shadow: none;
	}
	100% {
		text-shadow: 0 0 30px rgba(255,0,84,0.6),
		 0 0 60px rgba(255,0,84,0.4), 
		 0 0 100px rgba(255,0,84,0.2), 
		 0 0 90px rgba(255,0,84,0.1);
	}
}
h1#neon-tubing {
	animation: neonspark 1s 3s forwards;
	}
h1#neon-tubing span {
		animation: neonspark 4s 3s infinite;
	}