Problem z hover

Question

Mam problem ze znacznikiem hover. Kiedy dodaję transition do cech diva bez pseudoklasy hover (aby animacja była płynna również z powrotem) to po wczytaniu strony animowany jest np margin i border. Jak tego uniknąć?

#logo{
	width: 600px;
	height: 150px;
	background-image: url('logo.png');
	border-radius: 25px;
	background-color: black;
	margin: 0 auto;
	margin-top: 20px;
	border: 3px #3f3f3f dashed;
	transition:All 1s ease;
	-webkit-transition:All 1s ease;
	-moz-transition:All 1s ease;
	-o-transition:All 1s ease;

}

#logo:hover{
	transition:All 1s ease;
	-webkit-transition:All 1s ease;
	-moz-transition:All 1s ease;
	-o-transition:All 1s ease;
	border-top-left-radius: 300px 75px;
	border-top-right-radius: 300px 75px;
	border-bottom-left-radius: 300px 75px;
	border-bottom-right-radius: 300px 75px;
	background-position: -80px;
}

 

Answer 1

Najlepiej te atrybuty, które mają być animowane wrzuć do nowej klasy np. #logo .animacja i w tym miejscu użyj transition. Przy wywołaniu animacji dla All wszystkie atrybuty chcą się animować i dlatego mogą wychodzić takie niporządane efekty :)

Answer 2

Może to co nie ma byc animowane dodaj do nowej klasy tego logo, ale lepiej w transition ogarnij to ALL ;)