animacja css

1. Chcę ustawić div.logo by był cały czas widoczny tak jak po otworzeniu strony. Aktualnie tylko przy startowej petli jest logo.png widoczne, jak zaczya się kolejna petla znika i pojawie dopiero przed ostatnim zdjęciem. Mam taki kod:
   HTML:

<div id="top">
				
				<div id="animacja" class="shadow">
					<img src="img/animacja/test1.jpg">
					 <img src="img/animacja/test2.jpg">
					 <img src="img/animacja/test3.jpg">
					 <img src="img/animacja/test4.png">
					 <div class="logo">
						<img src="img/logo.png" />
					</div>
				</div>
			</div>

CSS:

 div#top
	{
		color:black;
		padding:15px;
		text-align: center;
		min-height:300px;
		max-height: 300px;
	}
		@-webkit-keyframes animacjaFadeInOut {
		 0% {
		   opacity:1;
		 }
		 17% {
		   opacity:1;
		 }
		 25% {
		   opacity:0;
		 }
		 92% {
		   opacity:0;
		 }
		 100% {
		   opacity:1;
		 }
		}

		@-moz-keyframes animacjaFadeInOut {
		 0% {
		   opacity:1;
		 }
		 17% {
		   opacity:1;
		 }
		 25% {
		   opacity:0;
		 }
		 92% {
		   opacity:0;
		 }
		 100% {
		   opacity:1;
		 }
		}

		@-o-keyframes animacjaFadeInOut {
		 0% {
		   opacity:1;
		 }
		 17% {
		   opacity:1;
		 }
		 25% {
		   opacity:0;
		 }
		 92% {
		   opacity:0;
		 }
		 100% {
		   opacity:1;
		 }
		}

		@keyframes animacjaFadeInOut {
		 0% {
		   opacity:1;
		 }
		 17% {
		   opacity:1;
		 }
		 25% {
		   opacity:0;
		 }
		 92% {
		   opacity:0;
		 }
		 100% {
		   opacity:1;
		 }
		}

		#animacja {
			position:relative;
			height:300px;
			width:900px;
			border: 6px solid #fff;
			-webkit-border-radius: 50px;
			-khtml-border-radius: 50px;
			-moz-border-radius: 50px;
			border-radius: 50px;
			margin:auto;
			overflow:hidden;/*przycinanie zdjęcia do diva*/
		}
		#animacja img {
			position: absolute;
			margin: auto;
			top: 0;
			left: -12px;
			right: 0;
			bottom: 0;;
		}

		#animacja img {
		  -webkit-animation-name: animacjaFadeInOut;
		  -webkit-animation-timing-function: ease-in-out;
		  -webkit-animation-iteration-count: infinite;
		  -webkit-animation-duration: 8s;

		  -moz-animation-name: animacjaFadeInOut;
		  -moz-animation-timing-function: ease-in-out;
		  -moz-animation-iteration-count: infinite;
		  -moz-animation-duration: 8s;

		  -o-animation-name: animacjaFadeInOut;
		  -o-animation-timing-function: ease-in-out;
		  -o-animation-iteration-count: infinite;
		  -o-animation-duration: 8s;

		  animation-name: animacjaFadeInOut;
		  animation-timing-function: ease-in-out;
		  animation-iteration-count: infinite;
		  animation-duration: 8s;
		}
		#animacja img:nth-of-type(1) {
		  -webkit-animation-delay: 6s;
		  -moz-animation-delay: 6s;
		  -o-animation-delay: 6s;
		  animation-delay: 6s;
		}
		#animacja img:nth-of-type(2) {
		  -webkit-animation-delay: 4s;
		  -moz-animation-delay: 4s;
		  -o-animation-delay: 4s;
		  animation-delay: 4s;
		}
		#animacja img:nth-of-type(3) {
		  -webkit-animation-delay: 2s;
		  -moz-animation-delay: 2s;
		  -o-animation-delay: 2s;
		  animation-delay: 2s;
		}
		#animacja img:nth-of-type(4) {
		  -webkit-animation-delay: 0;
		  -moz-animation-delay: 0;
		  -o-animation-delay: 0;
		  animation-delay: 0;
		}
		div#animacja div.logo
		{
			background-repeat:no-repeat;
		}

takie przykłady w formie suchego kodu nic nie mówią. na zagranicznych forach normą jest wrzucanie kodu "live" na jsfiddle, jsbin, codepen. wrzuć swój przykład na jeden z wymienionych serwisów, będzie łatwiej

Chcę aby to fioletowe kółko z % było na wierzchu tak jak przy starcie skryptu. I dlaczego w chromie nie przycina do border-radius.

http://jsfiddle.net/da89yqn4/

poczytaj o z-index. te procenty to najlepiej pozycjonowac absolutem i potem wysrodkowac. a za pomoca z-index musi potworzyc wartswy. rogi bylo wdac bo dales ramke, ale w kolo rami jest przezroczyste wiec rogi sie pokazywaly. dodalem do top kolor tla i zdjecia znikajac pod tym tlem. dla wizualizacji wez sobie jakies zdjecie poloz na stole a z kartki papieru wytnij kolo. i reszta akrtki przykrywa ci rogi zdjecia, a jesli wytniesza sama ramke to rogi zdjecia beda wystawac poza kolko. tak jest i tu

a tu rozwiazanie//jsfiddle.net/da89yqn4/1/

Ale jak wrzucę background to zakrywa animację zdjęć w tle. Co do przycinania to nie działa w chromie i nie wiem jak z operą bo zapomniałem przetestować w firefox i IE działa prawidłowo. W chromi jak wrzucam zdjęcie do diva i pozaokrąglam rogi też ładnie przycina, tylko sypie się przy dodaniu animacji animacji. A u Ciebie przynajmniej na chromie jest widoczny tylko border i % migający, a powinien być widoczny cały czas tak jak zwykłe zdjęcie wrzucone, z-index z tą animacją też nie działa.

no bo logo jest w divie z animacja, dlatego miga, bo sie animuje, skoro background zakrywa to mowilem bys poczytal o z index a wtedy bys wpadl by za pomoca z -index wypchnac zdjeca NA gore tla => http://jsfiddle.net/da89yqn4/2/

Dzięki, czytałem ale nie wpadłem żeby wykorzystać na tło.