Форумы портала PHP.SU :: Версия для печати :: transition

1. DarkLan - 02 Сентября, 2016 - 15:45:10 - перейти к сообщению

Добрый день.
Есть разметрка:

CODE (html):
скопировать код в буфер обмена

 
<!DOCTYPE html>
<html>
<head>
        <title>1</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
 
<body>
<div class="div1">
        1
</div>
 
</body>
</html>
 

есть стилевой:

CODE (css):
скопировать код в буфер обмена

 
.div1 {
        float: left;
        width: 500px;
        height: 100px;
        background-color: lightgreen;
        transition: all 2s;
}
.div1:hover {
        background-color: red;
}
 

При таком варианте transition работает как и задумывалось. НО если вставить инпут в страницу, начинается жопа. Жопа в том, что, в данном примере, background-color начинает работать сразу после того, как обновил/зашел на страницу.

Проверил в мазиле - все работает как и задумывалось. В чём баг? Как исправить?