Столкнулся со странным поведением свойства transition в chrome, edge и opera.
Берём как пример следующее:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="trn-bug.css" />
</head>
<body>
<a href="#">test</a>
</body>
</html>
a {
color: black;
-webkit-transition: 10s color;
-o-transition: 10s color;
transition: 10s color; }
a:hover {
color: red; }
Собственно при открытии страницы в firefox всё нормально: Изначально ссылка чёрного цвета, при наведении происходит плавный переход к красному, однако в указанных выше браузерах происходит следующее при открытии / обновлении страницы:
Сначала ссылка принимает синий цвет (по дефолту, когда не заданы css стили) => с синего цвета идёт transition на чёрный (заданный как основной в css) => при hover исправно изменяет цвет на красный.
Собственно является ли это нормальным? Исправится ли ситуация, если вместо transition использовать css animation?
Или проще через js откладывать transition до полной загрузки документа?
Простой
