Алексей Чипига

Задайте изначальную позицию по типу

.animated {
  transform: translateY(-100%);
  transition: transform 1s linear;
}

.animated:hover {
  transform: translateY(0);
}

Надеюсь идея понятна, transition не предназначен для указания направления. Он только о "переходе", что следует из его названия.

По CSS вопросов нет - там просто соблюдать "чистоту"

Да как бы ни так, по моему лично мнению, касательно html, достаточно следовать этим styleguid'ам
От разработчика bootstrap
Опять же соблюдать DRY в чистом html сложно (6 одинаковых блоков по структуре), по этому как советуют выше присмотритесь к jade и другим шаблонизаторам (особенно к php, волею судеб придется работать с ними).

Ну и чтобы быстрее придти к осмысленности, стоит взглянуть на БЭМ хотя бы на уровне именования классов.
nicothin.github.io/idiomatic-pre-CSS

Вам бы не на padding'и жаловаться, а на то что вам .features растягивает изнутри margin у абзацев. Скрин прикладываю. take.ms/jpLRq