Problème de calibrage d'une animation. (slide)

Bonjour,
J'ai un slider de 7 images (640px x 310px). Seulement, au momment du @keyframes pour animer mon slider (faire défiler les images) , je ne sait pas quoi mettre comme pourcentage dans le X% {left: ???%} du @keyframes de mon CSS.
Voici mon css, peut être que quelqu'un saurait m'aider à préciser ces valeurs.

#slideshow-sw {
    position: relative;
    width: 640px;
    height: 310px;
    padding: 15px;
    margin: 5% auto 2em;
    border: 1px solid #ddd;
    background-color: #FFF;
    background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
    border-radius: 2px 2px 2px 2px;
    /*box-shadow: 0 0 3px rgba(0,0,0, 0.2);*/
}

#slideshow-sw:before,
#slideshow-sw:after {
    position: absolute;
    bottom: 16px;
    z-index: -10;
    width: 50%;
    height: 20px;
    content: " ";
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    /*box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);*/
}

#slideshow-sw:before {
    left: 0;
    transform: rotate(-4deg)
}

#slidehow-sw:after {
    right: 0;
    transform: rotate(4deg);
}


/* gestion des dimensions et débordement du conteneur */
#slideshow-sw .container {
	position:relative;
	width: 640px;
	height: 309px;
	overflow: hidden;
    
}
	
/* on prévoit un petit espace gris pour la timeline */
#slideshow-sw .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	width: 100%;
	height: 1px;
	background: #999;
}
/* 
   le conteneur des slides
   en largeur il fait 100% x le nombre de slides
*/
#slideshow-sw .slider-sw {
	position: absolute;
	left:0; top:0;
	width: 700%;
	height: 310px;
}

/* annulation des marges sur figure */
#slideshow-sw figure {
	position:relative;
	display:inline-block;
	padding:0; margin:0;
    
    
}

/* effets vignette sur les images */
#slideshow-sw figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	/*box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;*/
}


/* styles des légendes */
#slideshow-sw figcaption {
	position:absolute;
	left:0; right:0; bottom: 5px;
	padding: 7px;
	margin:0;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}






@keyframes slider-sw {
    0% {left: 0%;}
    20% {left: 0%;}
    25% {left: -101%;}
    45% {left: -101%;}
    50% {left: -201%;}
    70% {left: -201%;}
    75% {left: -301%;}
    95% {left: -301%;}
    100% {left: 0%;}
}




#slideshow-sw .slider-sw {

	animation: slider-sw 25s infinite;
}

Modifié par Dayka (28 Nov 2019 - 20:37)

Voici le html qui va avec le css

        
        <section id="slideshow-sw">
            <div class="container">
                <div class="slider-sw">
                    <figure>
                        <img src="Livres/Images-livre/DarkBane.jpg" alt="" width="640" height="310">
                   
                    </figure>
                    <figure>
                        <img src="Livres/Images-livre/L-Academie-Jedi-Trilogie%20.jpg" alt="" width="640" height="310">
                      
                    </figure>
                    <figure>
                        <img src="Livres/Images-livre/Maul.jpg" alt="" width="640" height="310">
                       
                    </figure>
                    <figure>
                        <img src="Livres/Images-livre/plagueis1.jpg" alt="" width="640" height="310">
                        
                    </figure>
                    <figure>
                        <img src="Livres/Images-livre/revan.jpg" alt="" width="640" height="310">
                        
                    </figure>
                    <figure>
                        <img src="Livres/Images-livre/Tarkin.jpg" alt="" width="640" height="310">
                       
                    </figure>
                    <figure>
                        <img src="Livres/Images-livre/Thrawn.jpg" alt="" width="640" height="310">
                        
                    </figure>
                </div>
            </div>
            
            <span id="timeline"></span>
        </section>