Скрыть div, когда «animate-delay: 1s;» все еще продолжается и отображается после задержки

попробуйте определить класс следующим образом:

.delay-1 {
    animation-delay:1s !important;
    -webkit-animation-delay:1s !important;
}

не знаю, будет ли это работать... но стоит попробовать.. да... это сработает - это сработало для меня

Да, переход CSS3 сделает трюк, у меня есть демо-страница, созданная давно. Вы можете обратиться к нему.

Как вы можете видеть, первый элемент имеет задержку в 2 с, а второй элемент не имеет задержки. Удачи

#demo:hover {
width: 300px;
transition-delay: 2s
}

#demo1:hover {
width: 300px;
transition-delay: 0s
}

http://jsfiddle.net/zFbkL/

Вам все равно нужно добавить класс в раздел, когда вы прокручиваете его с помощью Javascript, но вы можете использовать nth-child() для каждого из них.

Скажем, 4 шага, которые вы могли бы сделать:

.steps .step:nth-child(1) { transition-delay: 1s; }
.steps .step:nth-child(2) { transition-delay: 2s; }
.steps .step:nth-child(3) { transition-delay: 3s; }
.steps .step:nth-child(4) { transition-delay: 4s; }

Хотя, с неизвестным количеством шагов вам лучше с этим справиться, я думаю.

$('.steps .step').each(function(i){
  $(this).css('animation-delay', i + 's');
});

Затем .steps анимацию, добавив класс в .steps.

.steps .step { trainsition: all 1s; opacity: 0; width: 0;}
.steps.in-view .step { opacity: 1; width: auto; }

Надеюсь, это то, к чему вы стремились.