Witam, mam bardzo dziwny problem. Robię prostą stronę www, w której znajduje się pasek menu, zrobiony z listy. Chciałem, żeby po najechaniu myszką elementy listy ( #nav_lista>li ) się animowały, więc wpisałem w css (plik: nav.css) "transition: 1s;", jednak gdy odświeżam stronę elementy te niepotrzebnie się animują, to znaczy po przeładowaniu strony elementy animują się dosłownie tak jakby miały ustawione "margin:0; padding: 0; font-size: 0" i dopiero po 1 sekundzie wchodzi margin, padding, font-size jaki mają wpisany w pliki nav2.css (i jaki powinny mieć od samego początku).
Najdziwniejsze jest to, że ta strona jest w 2 plikach - index.html i nav2.css, i gdy skopiujemy całą zawartość z nav2.css i wkleimy wszystko do index.html (w sekcji <head> ... </head>, pomiędzy tagami <style> ... </style>) to problem się rozwiązuje. W czy jest problem i czym różni się kod css bezpośrednio w pliku .html, a w zewnętrznym akruszu stylów?
<!DOCTYPE html>
<html lang="pl">
<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">
<link rel="Stylesheet" href="nav2.css">
<title>strona</title>
</head>
<body>
<div id="nav">
<div class="nav_wlasciciel">
XXX
</div>
<img id="nav_logo" src="logo.png">
<div class="nav_wlasciciel">
XXX
</div>
<div style="clear: both;"></div>
<div id="menu">
<ul id="nav_lista">
<li>menu</li>
<li>lokalizacja</li>
<li>godziny otwarcia</li>
<li>o nas</li>
</ul>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
body
{
margin: 0;
}
#nav
{
width: 100%;
text-align: center;
}
.nav_wlasciciel
{
box-sizing: border-box;
margin: 10px;
width: calc(40% - 20px);
font-size: 70px;
font-family: 'Caveat Brush', cursive;
letter-spacing: 2px;
border-top: 2px double blue;
border-bottom: 2px double blue;
float: left;
}
.nav_wlasciciel::first-letter
{
font-size: 75px;
}
.nav_wlasciciel::first-letter:hover
{
font-size: 100px;
}
#nav_logo
{
margin-top: 10px;
width: 20%;
float: left;
}
#menu
{
background-image: linear-gradient(#fff, #e0ecfa, #fff);
font-size: 30px;
}
#nav_lista
{
display: inline-block;
list-style-type: none;
padding: 20px;
}
#nav_lista>li
{
float: left;
padding: 20px;
transition: 1s;
}
#nav_lista>li:hover
{
padding: 20px 70px;
}