Problème avec animation-play-state sur un carrousel

Bonjour.

Je viens de mettre en place un carrousel full css qui passe d'un item à un autre par fondu enchainé. Le défilement est automatique au départ, puis j'ai ajouté un contrôle manuel (de simples boutons pour accéder directement à tel ou tel item). Comme le contrôle manuel interrompt le défilement automatique, j'ai ajouté un lien start pour redémarrer le défilement, et du coup aussi un lien stop pour l'interrompre là où il en est.

Le problème (pour les experts sans doute) : dans certains cas, ça marche très bien et dans d'autre cas, l'interruption / redémarrage fait bugger le défilement automatique. Je vais par exemple avoir un blanc dans mon défilement et / ou un décalage dans le timing de certains item.

Précision : j'utilise la dernière version de Safari sous MacOS X.

Le code :

.carrousel_auto // partie automatique du carrousel.
{
	position: relative;
	display: inline-block;
	opacity: 1;
	margin: 20px;
	width: 287px;
	height: 430px;
	overflow: hidden;
	-webkit-transition-duration: 2s;
	transition-duration: 2s;
}

.carrousel_manuel // partie manuelle du carrousel qui s'affiche à la place de la partie automatique lorsqu'on interrompt le défilement automatique.
{
	position: relative;
	left: -327px;
	margin: 20px;
	width: 287px;
	height: 430px;
	overflow: hidden;
	display: inline-block;
	opacity: 0;
	-webkit-transition-duration: 2s;
	transition-duration: 2s;
}

#cible1:target ~ .carrousel_auto, #cible2:target ~ .carrousel_auto, #cible3:target ~ .carrousel_auto, #cible4:target ~ .carrousel_auto
{
	opacity: 0;
}

#cible1:target ~ .carrousel_manuel, #cible2:target ~ .carrousel_manuel, #cible3:target ~ .carrousel_manuel, #cible4:target ~ .carrousel_manuel
{
	opacity: 1;
}

#cible1:target ~ .carrousel_manuel #img1, #cible2:target ~ .carrousel_manuel #img2, #cible3:target ~ .carrousel_manuel #img3, #cible4:target ~ .carrousel_manuel #img4
{
	opacity: 1;
}

.carrousel_auto .item
{
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	-webkit-animation: dissolve 16s linear infinite;
	animation: dissolve 16s linear infinite;
}

.carrousel_manuel .item
{
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	-webkit-transition-duration: 2s;
	transition-duration: 2s;
}

.carrousel_auto .item:nth-child(2)
{
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
	-ms-animation-delay: 4s;
	animation-delay: 4s;
}

.carrousel_auto .item:nth-child(3)
{
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 8s;
	-ms-animation-delay: 8s;
	animation-delay: 8s;
}

.carrousel_auto .item:nth-child(4)
{
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	-ms-animation-delay: 12s;
	animation-delay: 12s;
}

@-webkit-keyframes dissolve
{
	0%, 30%, 100% { opacity: 0; }
	5%, 25% { opacity: 1; }
}

@-moz-keyframes dissolve
{
	0%, 30%, 100% { opacity: 0; }
	5%, 25% { opacity: 1; }
}

@-ms-keyframes dissolve
{
	0%, 30%, 100% { opacity: 0; }
	5%, 25% { opacity: 1; }
}

@keyframes dissolve
{
	0%, 30%, 100% { opacity: 0; }
	5%, 25% { opacity: 1; }
}

// stop et auto sont pour les liens servant à interrompre et redémarrer le défilement automatique
.auto
{
	display: none;
}

#auto:target ~ .carrousel_auto .item
{
	opacity: 1;
	-webkit-animation-play-state: running;
	animation-play-state: running;
}

#stop:target ~ .auto
{
	display: inline;
}

#stop:target ~ .carrousel_auto .item
{
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

.cible // boutons pour afficher un item précis
{
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: #000000;
	border: solid 3px #000000;
	border-radius: 8px;
}

#cible1:target ~ #bcible1, #cible2:target ~ #bcible2, #cible3:target ~ #bcible3, #cible4:target ~ #bcible4
{
	background-color: #CCCCCC;
}

#cible1:target ~ .auto, #cible2:target ~ .auto, #cible3:target ~ .auto, #cible4:target ~ .auto
{
	display: inline-block;
}

<span id="cible1">&nbsp;</span>
<span id="cible2">&nbsp;</span>
<span id="cible3">&nbsp;</span>
<span id="cible4">&nbsp;</span>
<span id="auto">&nbsp;</span>
<span id="stop">&nbsp;</span>
<div class="carrousel_auto" id="carrousela">
	<img class="item" src="1.jpg">
	<img class="item" src="2.jpg">
	<img class="item" src="3.jpg">
	<img class="item" src="4.jpg">
</div><div class="carrousel_manuel" id="carrouselm">
	<img class="item" src="1.jpg" id="img1">
	<img class="item" src="2.jpg" id="img2">
	<img class="item" src="3.jpg" id="img3">
	<img class="item" src="4.jpg" id="img4">
</div><br>
<a href="#stop" class="stop">Stop</a>
<a href="#auto" class="auto">Auto</a>
<a href="#cible1" id="bcible1" class="cible"></a>
<a href="#cible2" id="bcible2" class="cible"></a>
<a href="#cible3" id="bcible3" class="cible"></a>
<a href="#cible4" id="bcible4" class="cible"></a>

Un grand merci d'avance pour votre aide
Cordialement