CSS Transition nie działa do końca jak bym chciał

Witam,
Mam problem odnośnie właściwości transition w CSS. Załączam kod z CSS'a. Miałem w planach zrobienie fajnego menu, lecz niestety transition "rysuje" obiekty tak jak zmieniałem je od samego początku a chciałbym, aby zmieniał ich wygląd tylko poprzez "nav a:hover". Prosiłbym o pomoc.

body
{
	position: relative;
}
nav
{
	width: 90%;
	height: 15%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 5%;
	padding-right: 5%;
}
a:link
{
	text-decoration: none;
	color: black;
}
nav a
{
	display: block;
	width: auto;
	height: auto;
	font-size: 200%;
	border: solid 1px;
	padding: 1%;
	transition-duration: 4s;
}
nav a:hover
{
	border-radius: 100px;
	color: white;
	background-color: black;
}

Ustawiłeś na hover zmianę: koloru, koloru tła i zaokrąglenia rogów.
Jeśli chcesz animować coś innego, to co innego wrzuć w hover.

@Freja Draco: W sensie nie chodzi o to. Po prostu dodanie do "nav a" właściwości transition powoduje, że widzę jak linki mają jeszcze typową niebieską czcionkę i podkreślenie, nawet się powiększają, czyli tak jakby rysują do tego co mam zdefiniowane w "nav a". I właśnie dopiero jak najadę na to zachodzi animacja jaką bym chciał. Problem w tym, że widzę po prostu drogę powstawania tego elementu, tak jak go po kolei definiowałem w CSS'ie. Rysują się wszystkie rzeczy związane z odnośnikami "a".

Rysują się wszystkie rzeczy związane z odnośnikami "a".

No a jak byś chciał?

@Freja Draco: No tak, że jak wchodzę na stronę to już są one w takiej postaci:

nav a
{
	width: auto;
	height: auto;
	font-size: 200%;
	border: solid 1px;
	padding: 1%;
	border-radius: 20px;
}

I jedynie najeżdżam sobie na nie i zmienia się ich wygląd, tak jak mam tutaj:

nav a:hover
{
	border-radius: 100px;
	color: white;
	background-color: grey;
}

Teraz od razu jak wchodzę na stronę to one powstają tak jakby z niczego. Nawet nie najeżdzając na nie.

Tutaj masz jak dopiero się "tworzy", jak widać nie ma tych właściwości co mam zdefiniowane.

Tutaj już jak się "narysowały" na ekranie.

A tutaj po najechaniu.

Przenieś transition-duration: 4s z .nav a do .nav a:hover.

@JavaZKrypt: Wtedy działa tak jakbym chciał, ale tylko w jedną stronę. Czyli jak najadę na to to animacja ładnie leci a jak zdejmuje kursor to momentalnie wraca do pierwotnego stanu. Dodaj, że właściwość ta zachowuj się tak dziwacznie tylko u mnie na komputerze, wrzuciłem to na darmowy hosting i nic takiego nie ma miejsca.

U mnie na firefoxie też tak się dzieje, na innych przeglądarkach działa jak powinno, na drugim laptopie z kolei i na firefoxie działa poprawnie.
Możesz dla pewności zastąpić to JS-em chociaż nie wiem czy ma to sens, np po nadaniu wszystkim z a wewnątrz nav klasy nav-link:

document.querySelectorAll('.nav-link').forEach(el => 
el.addEventListener('mouseover', (e) => e.target.style.transitionDuration = '4s'));

Chodzi ci o taki efekt jak tutaj: https://lab.laukstein.com/bug/input? Że się wszystko powiększa zamiast od razu być jak trzeba?

To jest bug w Chromie. Ma chyba z 10 lat. Dodaj znacznik <script> wypełniony pojedynczą spacją albo enterem (albo jakąś treścią).

@Ktos: Dzięki serdeczne, właśnie teraz znowu się tym bawiłem i zauważyłem, że jak znacznik skrypt był umieszczony w kodzie to się nic nie sypało i nie mogłem znaleźć żadnego związku pomiędzy transition a zwykłym skryptem. Dzięki serdecznie jeszcze raz