• Animation CSS Alain

    Toujours pour mon principal "client", une animation automatique avec arrêt au clic sur un bouton, en code CSS et en deux versions: verticale et horizontale.

    <div style="width: 800px; height: 450px; margin: 0px auto; border: 1px solid black; overflow: hidden; text-align:left;"><input id="av" type="text" value="anim" /> <input id="ar" type="text" value="stop" />
    <p id="mg1"><img src="http://ekladata.com/GhMzslcIi9la1HwZgNBt0UbgqMA.jpg" alt="" /> <img src="http://ekladata.com/1LUoH7ZFhXgqN1dUzwbiV-pz3cY.jpg" alt="" /> <img src="http://ekladata.com/D9zfGbuJZv5uw82AbvzVbFhpFc0.jpg" alt="" /> <img src="http://ekladata.com/_VoA28Uuj_E1lF1sydURtqS90dY.jpg" alt="" /> <img src="http://ekladata.com/aO42E37rritP46_6aPZmRrCWV44.jpg" alt="" /> <img src="http://ekladata.com/ZUGytRwwSBR2vh13Vrds1wxmS6Y.jpg" alt="" /> <img src="http://ekladata.com/tqqL7E0IP9cC91Rds9RHEYIp3sw.jpg" alt="" /></p>
    </div>

    <style><!--
    #mg1{animation: alain1 17s linear infinite alternate; animation-play-state:paused; width:800px;height:3150px;}
    #av{position:absolute; z-index:5; width:35px; height:15px; border:1px solid black; border-radius:5px; color:white; text-shadow:1px 1px black;transform:translate(750px,20px); background:lime;}
    #ar{position:absolute; z-index:5; width:35px; height:15px; border:1px solid black; border-radius:5px; color:white; text-shadow:1px 1px black;transform:translate(750px,50px); background:coral;}
    @keyframes alain1{
    0% {transform:translate(0px,0px);}
    7% {transform:translate(0px,0px);}
    10% {transform:translate(0px,-450px);}
    22% {transform:translate(0px,-450px);}
    25% {transform:translate(0px,-900px);}
    37% {transform:translate(0px,-900px);}
    40% {transform:translate(0px,-1350px);}
    52% {transform:translate(0px,-1350px);}
    55% {transform:translate(0px,-1800px);}
    67% {transform:translate(0px,-1800px);}
    70% {transform:translate(0px,-2250px);}
    82% {transform:translate(0px,-2250px);}
    85% {transform:translate(0px,-2700px);}
    100% {transform:translate(0px,-2700px);}
    }
    #av:focus ~ #mg1{animation-play-state:running;}
    --></style>

    Le cadre fait les dimensions d'une image soit 800x450px (16/9), adaptable à tout format en modifiant les hauteurs.

    Les boutons sont placés en indépendant.

    animation: alain1 17s linear infinite alternate; son temps de cycle est de 17 secondes et elle repart à l'envers à la fin (alternate) ce qui nous amène à donner un temps d'affichage de moitié pour la première et la dernière image.

    L'animation est paramétrée arrêtée à l'ouverture de l'article et démarre au clic sur le bouton vert et s'arrête par un autre clic.

    Les phases de l'animation sont le plus difficile à calculer et sont fonction du nombre d'images.

    La première image et la dernière n'apparaissent que moitié d'un temps d'affichage, en raison du mouvement alterné.

    <div style="width: 800px; height: 450px; margin: 0px auto; border: 1px solid black; overflow: hidden;"><input id="av2" type="text" value="anim" /> <input id="ar2" type="text" value="stop" />
    <p id="mg2"><img src="http://ekladata.com/GhMzslcIi9la1HwZgNBt0UbgqMA.jpg" alt="" /><img src="http://ekladata.com/1LUoH7ZFhXgqN1dUzwbiV-pz3cY.jpg" alt="" /><img src="http://ekladata.com/D9zfGbuJZv5uw82AbvzVbFhpFc0.jpg" alt="" /><img src="http://ekladata.com/_VoA28Uuj_E1lF1sydURtqS90dY.jpg" alt="" /><img src="http://ekladata.com/aO42E37rritP46_6aPZmRrCWV44.jpg" alt="" /><img src="http://ekladata.com/ZUGytRwwSBR2vh13Vrds1wxmS6Y.jpg" alt="" /><img src="http://ekladata.com/tqqL7E0IP9cC91Rds9RHEYIp3sw.jpg" alt="" /></p>
    </div>
    <style><!--
    #mg2{animation: alain2 17s linear infinite alternate; animation-play-state:paused; width:5650px;height:450px;}
    #av2{position:absolute; z-index:5; width:35px; height:15px; border:1px solid black; border-radius:5px; color:white; text-shadow:1px 1px black;transform:translate(750px,20px); background:lime;}
    #ar2{position:absolute; z-index:5; width:35px; height:15px; border:1px solid black; border-radius:5px; color:white; text-shadow:1px 1px black;transform:translate(750px,50px); background:coral;}
    @keyframes alain2{
    0% {transform:translate(0px,0px);}
    7% {transform:translate(0px,0px);}
    10% {transform:translate(-800px,0px);}
    22% {transform:translate(-800px,0px);}
    25% {transform:translate(-1600px,0px);}
    37% {transform:translate(-1600px,0px);}
    40% {transform:translate(-2400px,0px);}
    52% {transform:translate(-2400px,0px);}
    55% {transform:translate(-3200px,0px);}
    67% {transform:translate(-3200px,0px);}
    70% {transform:translate(-4000px,0px);}
    82% {transform:translate(-4000px,0px);}
    85% {transform:translate(-4800px,0px);}
    100% {transform:translate(-4800px,0px);}
    }
    #av2:focus ~ #mg2{animation-play-state:running;}
    --></style>