CSS анимация в Microsoft Edge

Добрый день! Помогите, пожалуйста, решить проблему. Есть сайт на котором при изменении размера экрана меняются марджины у пунктов меню и чтобы все происходило плавно решил добавить анимацию. Везде все нормально работает, но в Microsoft Edge и в IE эта анимация проигрывается при каждой загрузке страницы, а не только при изменении размера экрана, как в других браузерах. Может кто знает, как можно решить эту проблему?

Пример кода:

<style>
    .menu li {
        display: inline;
        list-style-type: none;
        margin: 15px 55px;
        transition: margin .2s linear;
    }
    @media screen and (max-width: 900px) {
        .menu li {
            margin: 15px 20px;
            transition: margin .2s linear;
        }
    }
</style>
<nav class="menu">
    <ul>
        <li>Меню 1</li>
        <li>Меню 2</li>
        <li>Меню 3</li>
    </ul>
</nav>