Почему при обновлении страницы в браузере применяется transition сразу?

Question

Ку. При обновлении страницы текст сначала чёрный, но потом применяется медленно css, в котором написано, что, при наведении на текст он будет менять цвет. Но какого фига он при обновлении страницы чёрный, а потом медленно меняется на красный? Как это исправить?

Вот код

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Сайт</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <li id="text"><a href="">Портфолио</a></li>
    <li id="text"><a href="">Портфолио</a></li>
    <li id="text"><a href="">Портфолио</a></li>
    <div>Ку</div>
</body>
</html>

А это код css

#text {
    list-style-type: none;
    display: inline;
    margin-right: 20px;
    text-decoration: none;
    font-size: 15px;
    font-family: Comic Sans MS, Comic Sans;
}

a {
    text-decoration: none;
    color: darkgrey;
    outline: none;
}

a:hover {
    color: blue;
    transition: 1s ease-in-out;
}

div {
    color: red;
    transition: 1s;
}

div: hover {
    color: blue;
    transition: 1;
}

Answer 1

Узри же, юный падаван - лишь опечатки вижу я. Пробел меж div: и hover, поверь, совсем не нужен. А так же, минимум, в transition, значенья timing-function и duration неизбежны, коль сокращенья так потребны. Но, в остальном же - код рабочий, и робит он согласно стилям, без всяких там чёрных колоров.

#text {
  list-style-type: none;
  display: inline;
  margin-right: 20px;
  text-decoration: none;
  font-size: 15px;
  font-family: Comic Sans MS, Comic Sans;
}

a {
  text-decoration: none;
  color: darkgrey;
  outline: none;
}

a:hover {
  color: blue;
  transition: 1s ease-in-out;
}

div {
  color: red;
  transition: 1s ease;
}

div:hover {
  color: blue;
  transition: 1 ease;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Сайт</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <li id="text"><a href="">Портфолио</a></li>
  <li id="text"><a href="">Портфолио</a></li>
  <li id="text"><a href="">Портфолио</a></li>
  <div>Ку</div>
</body>

</html>

БЛОГ НА HUSL

Почему при обновлении страницы в браузере применяется transition сразу?

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