Эффект плавного или если хотите постепенного появления блока сделает страничку сайта более динамичной, привлекательной. А быть может в этом даже найдется какая-то функциональность, когда определенную информацию надо просто показать с задержкой. Если вам необходимо такой эффект, то его можно получить либо через Ява скрипт, либо через настройку стилей. Я расскажу о CSS варианте, мне он кажется наиболее правильным, с минимальным кодом, то есть через настройку тех самых стилей.

 Реализация плавного появления блока с помощью стилей (CSS)

Все можно прописать прямо в модуле, который будет отображаться, либо разделить мух от котлет. То есть CSS прописываем в стилях, сам блок в месте, где он должен отображаться. Однако здесь надо обратить внимание на правило @keyframes Это правило надо прописывать скорее всего лишь для нужного блока (вернее анимации), а значит прописывать его в общих стилях не вариант, так как там могут быть затронуты те компоненты, что не должны проявляться. В общем, правило прописываем тоже сразу в месте проявления модуля.

Смотреть код

Здесь все просто. Вначале прописываем стили, потом задаем анимацию на 3 секунды, а для нее создаем правило проявления от (opacity) 0 до 1.

 Реализация плавного выкатывания блока с помощью стилей (CSS)

еще один вариант появления блока, это его выкатывание как бы со стороны, вплоть до того, что вовсе может выезжать из-за экрана. Здесь смысл примерно такой же, только работаем уже не с оператором opacity, а с операторами позиционирования блока, либо его ширины и высоты.

Смотреть код