Keyframes с box-shadow. Как сделать?

Question

[Павел migelonio]

Я хочу анимировать img с помощью keyframes. Мне нужно, чтобы на :hover изменялись параметры box-shadow. Проблема в том, что мне нужно сделать так, чтобы на :hover параметры увеличивались, но когда мышь уходит с img, параметры опять должны возвращаться в нормальное состояние (если hover, то тень увеличивается, если убрал с hover, тень уменьшается). У меня же происходит так, что параметры увеличиваются, а затем сразу возвращаются обратно (когда я еще держу мышь на фото). Как исправить?

<div class="portfolio_photos">
        <img class="port_img" src="blog.png" title="we offer blogs">
        <img class="port_img" src="media.png" title="we pffer media content">
        <img class="port_img" src="news.jpg" title="we offer news projects">
    </div>

.portfolio_photos .port_img {
    position: relative;
    float: left;

    height: 400px;
    width: 400px;
    box-shadow: 8px 10px #595959;
    
    margin: 30px;
}

.portfolio_photos .port_img:hover {
    animation: shadow_move 2s;
    animation-duration: 2s;
    transition: box-shadow 2s;
    cursor: pointer;
}

@keyframes shadow_move {
    50% {
        box-shadow: 16px 18px black;
    }
}

Comments

[Сергей Сергей]

Анимацию вообще убрать, здесь хватит одного transition.

.portfolio_photos .port_img {
    position: relative;
    float: left;

    height: 400px;
    width: 400px;
    box-shadow: 8px 10px #595959;
    transition: box-shadow 2s;   
    margin: 30px;
}

.portfolio_photos .port_img:hover {
    box-shadow: 16px 18px black;
    cursor: pointer;
}

Answer 1

[Александр]

Вариант с transition:

Comments

[Павел migelonio]

Можно еще вопрос. Все работает, но когда навожу на картинку (появляется анимация), появляется лишний scroll bar снизу (появляется странный отступ справа до тех пор, пока я не обновлю страницу). Как можно это исправить?

[Александр]

Павел migelonio, Надо дебажить вёрстку. Задавайте отдельным вопросом.

[Павел migelonio]

Александр, спасибо, задал