v3shin

outline: none; ?

.top_menu_link_container:nth-child(1) .top_menu_item {}
.top_menu_link_container:nth-child(2) .top_menu_item {}

https://developer.mozilla.org/ru/docs/Web/CSS/back...

Можно код в песочнице? Потому что пока идеи только в сторону скрипта, ограничивающего количество символов.

Вариант с js: при клике добавлять элементу класс и анимировать этот класс.
Вариант с css: переделать через label, добавить внутрь label скрытый checkbox (или radio) и анимировать элемент после этого checkbox'а: label input[type="checkbox"]:checked + .myClass{}

Картинкой перекрывается.

Чтобы починить добавьте тексту z-index: 1.

Ну так opacity изменяется в самом эффекте fadeIn/fadeOut.

Можете подключить к разработке less или sass, чтобы писать:

.single-text{
  h1, h2, h3{
    color: red;
  }
}

Хотя, сгенерированный код будет такой как вы показали.

Общий принцип примерно такой:

<div id="timer"></div>

<script>
var endDate = new Date(2016, 11, 23, 0, 0, 0); // 23 декабря 2016
function addZeros(x,n){x=x+'';while(x.length<n)x='0'+x;return x;}
function tick(){
	var diff = Math.floor((endDate.getTime() - (new Date()).getTime()) / 1000); // секунд до даты
	if(diff < 0) diff = 0; // отсчет окончен
	var dayDiff = Math.floor(diff / 86400);diff -= 86400 * dayDiff; // разница дней
	var hoursDiff = Math.floor(diff / 3600);diff -= 3600 * hoursDiff; // разница часов
	var minutesDiff = Math.floor(diff / 60);diff -= 60 * minutesDiff; // разница минут
	var secondsDiff = diff; // разница секунд
	var html = '';
	html += Math.floor(diff/86400);
	document.getElementById('timer').innerHTML = dayDiff+':'+addZeros(hoursDiff, 2)+':'+addZeros(minutesDiff, 2)+':'+addZeros(secondsDiff, 2);
	setTimeout(tick, 1000);
}
tick();
</script>

Все красивости - на ваш вкус.