ну если див ВНЕ хидера, то поставьте ему z-индекс ВЫШЕ чем у хидера. какой смысл ставить одинаковые z-index: 1 тогда. тогда выше будет тот элемент, чкто ниже в дереве DOM.
ss44v: когда происходит анимация цветов, то есть ПЛАВНЫЙ переход от одного оттенка к другому, то , конечно, в это время появляются цвета, которых вы не добавляли, но которые добавит браузер, пытаясь сделать ПЛАВНЫЙ переход от одного оттенка к другому. это нормально. если сделать так как вы хотите, только 5-6 цветов, то они будут просто мигать, резко сменять друг друга, а не анимировано, плавно.
через css выйдет. только вы же keyframes не дописали. 50% - есть , а еще надо как минимум две точки - 0% и 100%. в них тоже пропишите какой будет фон или что вы там анимируете