Как решить такую не сложную задачу по jquery?

Вроде бы элементарная задача, но не могу решить уже несколько часов.
Есть несколько блоков с данными.

<select>
<option value="1">
<option value="2">
<option value="3">
</select>

<div class="parent-block">
    <div class="children-block children-block-visible" data-block="1">
        <div class="children-block__item"></div>
        <div class="children-block__item"></div>
    </div>
    <div class="children-block" data-block="2">
        <div class="children-block__item"></div>
        <div class="children-block__item"></div>
    </div>
    <div class="children-block" data-block="3">
        <div class="children-block__item"></div>
        <div class="children-block__item"></div>
    </div>
</div>

При загрузке страницы отображается только первый блок, для остальных прописано:
max-height:0px;overflow:hidden;

При выборе другого пункта из селекта блок который сейчас отображается должен плавно скрываться, а другой (выбранный в селекте) должен открываться.
https://www.youtube.com/watch?v=0PuAT0BDhwU&featur...

Делаю с помощью @keyframes анимации.
CSS примерно такой:

.children-block{
    max-height:0px;
    overflow:hidden;
    animation-duration: 1s;
    animation-name: hide-car-price;
    animation-fill-mode: both;

}
.children-block-visible{
    animation-duration: 1s;
    animation-name: show-car-price;
    animation-fill-mode: forwards;
}

@-webkit-keyframes show-car-price {
    0% {
        max-height: 0px;
    }

    100% {
        max-height: 1000px;

    }
}@-webkit-keyframes hide-car-price {
    0% {
        max-height: 1000px;
    }
    100% {
        max-height: 0px;
    }
}

В скрипте по событию change для select добавляю к нужному блоку класс .children-block-visible
Проблема в том что с таким css блок .children-block, который изначально должен отображаться, анимируется при загрузке страницы.

Понимаю что дурацкий вопрос. Помогите советом как такое сделать.