Когда Вы пытаетесь отладить что-то, старайтесь постепенно убрать всё лишнее.
Например, из трех блоков оставляете только один, смотрите баг сохраняется. Дальше убираете кнопку, ничего не меняется, проблема ещё есть, значит дело не в этом.
И таким образом старайтесь всё упростить.
Советую прочитать про свойство animation-fill-mode.
Что у вас происходило: когда вы убирает курсор с блока, стили .card-block__position становятся теми, что без hover ( это bottom: -41px ), а анимация ещё не применилась, т.к. у вас стоит задержка animation-duration: 200ms; и потом только срабатывает анимация и свойство bottom становится 0 после чего уже постепенно меняется на bottom: -41px
Это решается установление свойства animation-fill-mode: backwards
Во время отладки анимации очень полезным будет смотреть её в замедленном режиме, тогда вы сможете понять в чем проблема (см. скрин) Открываете консоль разработчика
вот решенная ваша проблема:
https://codepen.io/anon/pen/ZdrjeZ
Также используйте сокращенное свойство animation, это хорошая практика и код более читаемый.
animation: 200ms BackgroundIn linear 0ms 1 normal backwards;
И вообще у вас есть некоторая проблема с вашим кодом. После загрузки страницы сразу же срабатывает анимация, это не хорошо.
И да, я в принципе не вижу смысла использовать здесь @keyframes. Это правило используется, когда действительно нужна анимация и иначе сделать нельзя, в вашем случае все делается через transition.
Вот я переписала анимацию bottomIn
https://codepen.io/anon/pen/WqMKaL
Простой
