transition для ссылки работает не правильно

Question

Проблема в том, что ссылки меняются не только при hover-е, но и просто при обновлении страницы. Т.е. изначально они синие, потом постепенно становятся серыми и приобретают объём и высоту из body.

body {
  font-family: 'Kanit', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: #070707;
}

.menu__list {
  display: flex;
  justify-content: space-between;
}

.menu__list-link {
  text-decoration: none;
  color: #828282;
  transition: all 1.5s;
}

.menu__list-link:hover {
  color: #070707;
}

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__list-item">
      <a class="menu__list-link" href="#">Home</a>
    </li>
    <li class="menu__list-item">
      <a class="menu__list-link" href="#">About me</a>
    </li>
    <li class="menu__list-item">
      <a class="menu__list-link" href="#">Skills</a>
    </li>
    <li class="menu__list-item">
      <a class="menu__list-link" href="#">Portfolio</a>
    </li>
    <li class="menu__list-item">
      <a class="menu__list-link" href="#">Contacts</a>
    </li>
  </ul>
</nav>

Не могу понять, в чем проблема? В другом проекте, в аналогичной ситуации, всё работает. Загуглить так же не могу, потому что не знаю, как коротко описать данный вопрос.

ссылка на видео

Answer 1

Чтобы при загрузке ничего не анимировалось, можно использовать keyframes или сделать что-то вроде:

.load * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

и

$(window).load(function() {
  $("body").removeClass("load");
});

Ответ найден в этой теме. Спасибо 11111000000.

БЛОГ НА HUSL

transition для ссылки работает не правильно

Ответы (1 шт):