niepełne animacje (css-animation + js-wywołanie)

Witam posiadam prostą galerie którą chce przewijać. przewijanie ma mieć efekt taki że stary obraz zanika, nowy jest ładowany z tablicy i ponownie się pojawia.

css:

@keyframes anim1
	{
        from {opacity:0;}
        to {opacity:1;}
	}

@keyframes anim0
	{
        from {opacity:1;}
        to {opacity:0;}
	}

 .zrzut1
	{
        animation-name:anim1;
        animation-duration:10s;
	}

.zrzut0
	{
        animation-name:anim0;
        animation-duration:10s;
	}

js:

function galeria2()
	{
	document.getElementById('zrzut').className = 'zrzut0';
	if (i == 5) {i = 1;} else {i++;};
	document.getElementById('zrzut').style.backgroundImage = 'url("' + obrazy[i].src + '")';  
	document.getElementById('zrzut').className = 'zrzut1';
	};

Problem polega na tym że obraz znika bez animacji, następnie jest prawidłowo ładowany nowy i płynnie się pojawia.
Drugie i kolejne przewijanie już jest bez żadnej animacji.
Gdzie tkwi problem?
Proszę o pomoc

//Jestem w stanie zrozumieć że nie zdąży warstwa zniknąć a już zacznie się pojawiać i że nie czeka na zakończenie animacji poprzedniej. Ale w takim razie dlaczego animacja pojawiania jest wykonywana tylko za pierwszym razem.
Wiem że łatwiej jest za pomocą jQuery ale do tak prostej z pozoru galerii gdzie jest raptem 5 zrzutów ekranu nie chce ładować całej biblioteki. A może jeśli chce się to sprawnie zrobić to nie ma wyjścia?

Kod Javascript nie czeka na zakończenie animacji.

function galeria2()
	{
	document.getElementById('zrzut').className = 'zrzut0';
	if (i == 5) {i = 1;} else {i++;};
	document.getElementById('zrzut').style.backgroundImage = 'url("' + obrazy[i].src + '")';  
	document.getElementById('zrzut').className = 'zrzut1';
	};

więc to działa tak, że element id=zrzut dostaje obie klasy jednocześnie i po zakończeniu kodu JS jest z nimi renderowany. A animacje są sprzeczne.
Tak samo przeglądarka nie czeka na załadowanie obrazka do background tylko dzieje się to już po zakończeniu tej funkcji.

Albo musisz preloadować ten obrazek za pomocą elementu IMG i zdarzenia onload albo w ogóle obrazek niech będzie IMG:

var mojImg = new Image();
mojImg.onload = function(){
   myDiv.style.backgroundImage = 'url(' + mojImg.src + ')'; <-- to wykona się po wczytaniu obrazka z serwera
};
mojImg.src = imageLocation;

Tym samym twoja klasa animacji fadeOut powinna być nadawana elementowi przed powyższym, natomiast fadeIn wewnątrz funkcji onload.

Inna sprawa, że tą animację można zrobić łatwiej i bez używania @keyframes.
W CSS masz taką właściość: transition.

#zrzut{
  transition:all 10s ease;
}

Spowoduje, że zmiana wszelkich liczbowych właściwości elementu zrzut będzie automatycznie animowana. Wówczas wystarczy zmieniać opacity elementu 0->1 lub 1->0 a animacja zrobi się sama.