image défillante entierement en CSS (un peu de jolie )

dadynio
Les bases HTML/CSS

Salut amis du net je suis sur un projet comme le dit le titre de défilement d'image entierement en css,
j'ai réussi à mettre en forme comme je le voulais mon code de façon à ne voir que 2 images, puis les faire défiler une en une.
Mon problème et dans la partie Css, je voudrai ajouter des animation pour que les image glisse fluidement,
pour la première pas de problème animation fluide de margin-left:-330px;

{
#sl_i2:target ~ #slideshow .c_slider
{
 -moz-animation: anim 1s linear forwards 0.2s;
    -webkit-animation: anim 1s linear forwards 0.2s;
    -o-animation: anim 1s linear forwards 0.2s;
    -ms-animation: anim 1s linear forwards 0.2s;
    animation: anim 1s linear forwards 0.2s;
    }
@-moz-keyframes anim {
   0% {width: 930px;margin-left: 0}
   100% {margin-left: -330px; width: 1230px;}
}
@-webkit-keyframes anim {
   0% {width: 930px;margin-left: 0}
   100% {margin-left: -330px; width: 1230px;}
}
@-o-keyframes anim {
   0% {width: 930px;margin-left: 0}
   100% {margin-left: -330px; width: 1230px;}
}
@-ms-keyframes anim {
   0% {width: 930px;margin-left: 0}
   100% {margin-left: -330px; width: 1230px;}
}
@keyframes anim {
   0% {width: 930px;margin-left: 0}
   100% {margin-left: -330px; width: 1230px;}
}

mais lorsque je code la deuxième animation (#sl_i3) (margin-left:-630px;) le css oublie la premiere animation et me mes directement à -630px;

Vous comprendrez mieux avec tout le code:

HTML 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <span id="sl_i1" class="sl_command sl_i"> </span>
    <span id="sl_i2" class="sl_command sl_i"> </span>
    <span id="sl_i3" class="sl_command sl_i"> </span>
    <span id="sl_i4" class="sl_command sl_i"> </span>
    <section id="slideshow">
        <a class="commands prev commands1" href="#sl_i4" title="Go to last slide"><</a>
        <a class="commands next commands1" href="#sl_i2" title="Go to 2nd slide">></a>
        <a class="commands prev commands2" href="#sl_i1" title="Go to 1rst slide"><</a>
        <a class="commands next commands2" href="#sl_i3" title="Go to 3rd slide">></a>
        <a class="commands prev commands3" href="#sl_i2" title="Go to 2nd slide"><</a>
        <a class="commands next commands3" href="#sl_i4" title="Go to 4th slide">></a>
        <a class="commands prev commands4" href="#sl_i3" title="Go to 3rd slide"><</a>
        <a class="commands next commands4" href="#sl_i1" title="Go to first slide">></a>

        <div class="container">
            <div class="c_slider">

<ul class="menu">
<li><a href="#"><img class="project-image" src="/structure diezer/img/windows.png" alt="windows.png"></a></li>
<li><a href="#"><img class="project-image" src="/structure diezer/img/firefox.png" alt="windows.png"></a></li>
<li><a href="#"><img class="project-image" src="/structure diezer/img/html5.png" alt="windows.png"></a></li>
<li><a href="#"><img class="project-image" src="/structure diezer/img/css3.png" alt="windows.png"></a></li>
<li><a href="#"><img class="project-image" src="/structure diezer/img/windows.png" alt="windows.png"></a></li>
</ul>       
            </div>  
        </div>
    </section>
</body>
</html>

CSS: 

.menu{
  margin-left: 0;
  height: 220px;
  overflow: hidden;
}
.menu li{
    height: 200px;
    width: 290px;
    margin-top: 10px;
    margin-left: 0;
    display: inline-block;
}
.menu img{
    height: 100%;
    width: 100%;
}

#slideshow {
    position: relative;
    width: 640px;
    height: 210px;
    padding: 15px;
    margin: 0 auto 2em; 
}

#slideshow .commands {
    position: absolute;
    top: 45%;
    padding: 5px 13px;
    border-bottom:0;
    color: #aaa;
    text-decoration:none;
    background-color: #eee;
    background-image: -webkit-linear-gradient(#fff,#ddd);
    background-image: -moz-linear-gradient(#fff,#ddd);
    background-image: -ms-linear-gradient(#fff,#ddd);
    background-image: -o-linear-gradient(#fff,#ddd);
    background-image: linear-gradient(#fff,#ddd);
    text-shadow: 0 0 1px #aaa;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
#slideshow .prev {
    left: -48px;
}
#slideshow .next {
    right: -48px;
}
#slideshow .prev,
#slideshow .next {
    display:none;
}
#slideshow .prev,
#slideshow .next {
    display:none;
}
#slideshow .commands1 {
    display: block;
}

#slideshow .container {
    border: 1px solid red;
    position:relative;
    width: 630px;
    height: 310px;
    overflow: hidden;
}
#slideshow .c_slider {
    position: absolute;
     top:0;
    width: 100%;
    height: 310px;
}
.sl_i:target ~ #slideshow .c_slider {
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    transition: background 1s;
}
#sl_i1:target ~ #slideshow .commands { display: none; }
#sl_i1:target ~ #slideshow .commands1 { display: block; }
#sl_i1:target ~ #slideshow .c_slider                                
{ 
}

#sl_i2:target ~ #slideshow .commands { display: none; }
#sl_i2:target ~ #slideshow .commands2 { display: block; }
#sl_i2:target ~ #slideshow .c_slider
{
 -moz-animation: anim 1s linear forwards 0.2s;
    -webkit-animation: anim 1s linear forwards 0.2s;
    -o-animation: anim 1s linear forwards 0.2s;
    -ms-animation: anim 1s linear forwards 0.2s;
    animation: anim 1s linear forwards 0.2s;
    }
@-moz-keyframes anim {
   0% {width: 930px;margin-left: 0}
   100% {margin-left: -330px; width: 1230px;}
}
@-webkit-keyframes anim {
   0% {width: 930px;margin-left: 0}
   100% {margin-left: -330px; width: 1230px;}
}
@-o-keyframes anim {
   0% {width: 930px;margin-left: 0}
   100% {margin-left: -330px; width: 1230px;}
}
@-ms-keyframes anim {
   0% {width: 930px;margin-left: 0}
   100% {margin-left: -330px; width: 1230px;}
}
@keyframes anim {
   0% {width: 930px;margin-left: 0}
   100% {margin-left: -330px; width: 1230px;}
}
#sl_i3:target ~ #slideshow .commands { display: none; }
#sl_i3:target ~ #slideshow .commands3 { display: block; }
#sl_i3:target ~ #slideshow .c_slider

{ margin-left: -630px;width: 1230px;
}

#sl_i4:target ~ #slideshow .commands { display: none; }
#sl_i4:target ~ #slideshow .commands4 { display: block; }
#sl_i4:target ~ #slideshow .c_slider                                
{
margin-left: -930px;width: 1530px;

}

1 réponse

dadynio
Auteur
Réponse acceptée

Sujet Résolue tout seul ^^ pour ceux qui serai intéresser:
http://www.alsacreations.com/tuto/lire/1058-ID-slideshow-css3-target-animation.html