• Code : Pur CSS3 Image Slider

    Code : Pur CSS3 Image Slider

    - Copiez le code ci - dessous et collez dessus

    - Changement lien et  images avec le vôtre.

    <style type="text/css" media="screen"> .container { margin: 0 auto; overflow: hidden; width: 700px; } #content-slider { height: 335px; width: 100%; } #slider { background: none repeat scroll 0 0 #000000; border: 5px solid #FFFFFF; -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); height: 320px; margin: 10px auto; overflow: visible; position: relative; width: 680px; } #mask { height: 320px; overflow: hidden; } #slider ul { margin: 0; padding: 0; position: relative; } #slider li { width: 680px; height: 320px; position: absolute; top: -325px; list-style: none; } #slider li.firstanimation { -moz-animation: cycle 25s linear infinite; -webkit-animation: cycle 25s linear infinite; } #slider li.secondanimation { -moz-animation: cycletwo 25s linear infinite; -webkit-animation: cycletwo 25s linear infinite; } #slider li.thirdanimation { -moz-animation: cyclethree 25s linear infinite; -webkit-animation: cyclethree 25s linear infinite; } #slider li.fourthanimation { -moz-animation: cyclefour 25s linear infinite; -webkit-animation: cyclefour 25s linear infinite; } #slider li.fifthanimation { -moz-animation: cyclefive 25s linear infinite; -webkit-animation: cyclefive 25s linear infinite; } #slider .tooltip { background: rgba(0, 0, 0, 0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #slider .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 20px; } #slider li#first:hover .tooltip, #slider li#second:hover .tooltip, #slider li#third:hover .tooltip, #slider li#fourth:hover .tooltip, #slider li#fifth:hover .tooltip { left: 0px; } /* PROGRESS BAR */ .progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; -moz-animation: fullexpand 25s ease-out infinite; -webkit-animation: fullexpand 25s ease-out infinite; } /* ANIMATION */ @-moz-keyframes cycle { 0% { top: 0px; } 4% { top: 0px; } 16% { top: 0px; opacity: 1; z-index: 0; } 20% { top: 325px; opacity: 0; z-index: 0; } 21% { top: -325px; opacity: 0; z-index: -1; } 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } 100% { top: 0px; opacity: 1; } } @-moz-keyframes cycletwo { 0% { top: -325px; opacity: 0; } 16% { top: -325px; opacity: 0; } 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } 36% { top: 0px; opacity: 1; z-index: 0; } 40% { top: 325px; opacity: 0; z-index: 0; } 41% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-moz-keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-moz-keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-moz-keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100% { top: 325px; opacity: 0; z-index: 0; } } @-webkit-keyframes cycle { 0% { top: 0px; } 4% { top: 0px; } 16% { top: 0px; opacity: 1; z-index: 0; } 20% { top: 325px; opacity: 0; z-index: 0; } 21% { top: -325px; opacity: 0; z-index: -1; } 50% { top: -325px; opacity: 0; z-index: -1; } 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } 100% { top: 0px; opacity: 1; } } @-webkit-keyframes cycletwo { 0% { top: -325px; opacity: 0; } 16% { top: -325px; opacity: 0; } 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } 36% { top: 0px; opacity: 1; z-index: 0; } 40% { top: 325px; opacity: 0; z-index: 0; } 41% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-webkit-keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; z-index: 0; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-webkit-keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-webkit-keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100% { top: 325px; opacity: 0; z-index: 0; } } /* ANIMATION BAR */ @-moz-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } } @-webkit-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } } </style> <div class="container"> <div id="content-slider"> <div id="slider"> <div id="mask"> <ul> <li id="first" class="firstanimation"> <a href="http://dimpost.com"> <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar" /> </a> <div class="tooltip"> <h1>Cougar</h1> </div> </li> <li id="second" class="secondanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions" /> </a> <div class="tooltip"> <h1>Lions</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker" /> </a> <div class="tooltip"> <h1>Snowalker</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling" /> </a> <div class="tooltip"> <h1>Howling</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing" /> </a> <div class="tooltip"> <h1>Sunbathing</h1> </div> </li> </ul> </div> <div class="progress-bar"></div> </div> </div> </div>


    SECTIONS DE CET ARTICLE LIEN

    Pour obtenir un solide sens du processus du début à la fin, ci - dessous est un aperçu de l'article. S'il vous plaît noter que cet effet ne fonctionnera correctement dans les navigateurs modernes qui prennent en charge les propriétés CSS3 utilisés.

    1. Présentation Apprenez les concepts de base liés aux transitions CSS3 et animation d'images clés.
    2. Balisage HTML Créer le balisage HTML pour les images coulissantes.
    3. Styles CSS Créer la feuille de style pour afficher le curseur.
    4. CSS3 animation keyframe Ajouter animation du curseur (nous allons vous expliquer les différents processus qui se déroulent).
    5. La barre de progression Ajouter une barre de progression pour notre curseur.
    6. Tooltip Ajouter une info - bulle pour afficher le titre de l'image.
    7. Transitions CSS3 Animer l'infobulle utilisant des transitions CSS3 pour le faire apparaître à planer sur l'image.
    8. Pause et redémarrage Mettre en pause le curseur et redémarrez - le sur le vol stationnaire.
    9. Démo Découvrez le curseur dans l' action.
    10. Conclusion Considérations finales.

    Pur CSS3 Cycle Curseur
    Capture d'écran du pur diaporama CSS3 cycliste .

    1. Introduction Lien

    Pour suivre ce tutoriel, ayant une compréhension de base des CSS, des transitions CSS3 en particulier et de l'animation d'images clés, est important. L'utilisation de ce concept simple, nous allons voir comment faire un curseur sur l'image fonctionnelle.

    CONCEPTS DE BASE DE CSS3 TRANSITIONS LIEN

    Normalement , lorsque vous modifiez une valeur de CSS, le changement est instantané. Maintenant, grâce à la transition des biens, nous pouvons facilement animer de l'ancien au nouvel état.

    Nous pouvons utiliser quatre propriétés de transition:

    1. transition-property
      Définit le nom (s) des propriétés CSS auxquelles les transitions doivent être appliquées.
    2. transition-duration
      Définit la durée pendant laquelle les transitions se produisent.
    3. transition-timing-function
      Détermine comment les valeurs intermédiaires de la transition sont calculées. Les effets de la fonction de synchronisation sont communément appelées fonctions d'accélération.
    4. transition-delay
      Définit lorsque la transition commence.

    À l'heure actuelle, les transitions CSS3 sont pris en charge dans Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ et IE 10. Parce que la technologie est encore relativement nouveau, les préfixes pour les navigateurs sont nécessaires . Jusqu'à présent, la syntaxe est exactement le même pour chaque navigateur, avec seulement une modification du préfixe nécessaire. Nous allons les omettre dans les extraits de cet article, mais s'il vous plaît rappelez - vous d'inclure les préfixes dans votre code.

    Voyons voir comment appliquer une simple transition vers un lien:

    a {
       color: #000;
       transition-property: color;
       transition-duration: 0.7s;
       transition-timing-function: ease-in;
       transition-delay: 0.3s;
    }
    
    a:hover {
       color: #fff;
    }

    Lors de l'attribution d'une animation à un élément, vous pouvez également utiliser le raccourci:

    a  {
       color: #000;
       transition: color 0.7s ease-in 0.3s;
    }
    
    a:hover {
       color: #fff;
    }

    Le W3C a une liste de tous les " Animable Propriétés ."

    CONCEPTS DE BASE DE CSS3 ANIMATIONS LIEN

    Animation CSS nous permet de créer des animations sans JavaScript en utilisant un ensemble de keyframes .

    Contrairement à des transitions CSS, animations keyframe sont actuellement pris en charge uniquement dans les navigateurs Webkit et Firefox et bientôt dans IE 10. navigateurs non pris en charge simplement ignorer votre code d'animation.

    La propriété d'animation dispose de huit sous-propriétés:

    1. animation-delay
      Définit quand l'animation commence.
    2. animation-direction
      Définit l'animation à jouer dans le sens inverse des cycles alternés.
    3. animation-duration
      Définit la durée de l'animation nécessaire pour terminer un cycle.
    4. animation-iteration-count
      Définit le nombre de fois un cycle d'animation devrait jouer avant d'arrêter.
    5. animation-name
      Indique le nom de la @keyframesrègle.
    6. animation-play-state
      Détermine si une animation est en cours d'exécution ou en pause.
    7. animation-timing-function
      Décrit comment une animation progresse sur un cycle.
    8. animation-fill-mode
      Indique comment une animation CSS devrait appliquer des styles à sa cible avant et après l'exécution.

    Voyons voir comment appliquer une animation simple à un div.

    /* This is the element we are applying the animation to. */
    
    div {
       animation-name: move;
       animation-duration: 1s;
       animation-timing-function: ease-in-out;
       animation-delay: 0.5s;
       animation-iteration-count: 2;
       animation-direction: alternate;
    
       -moz-animation-name: move;
       -moz-animation-duration: 1s;
       -moz-animation-timing-function: ease-in-out;
       -moz-animation-delay: 0.5s;
       -moz-animation-iteration-count: 2;
       -moz-animation-direction: alternate;
    
       -webkit-animation-name: move;
       -webkit-animation-duration: 1s;
       -webkit-animation-timing-function: ease-in-out;
       -webkit-animation-delay: 0.5s;
       -webkit-animation-iteration-count: 2;
       -webkit-animation-direction: alternate;
    }
    
    /* This is the animation code. */
    
    @keyframes move {
       from {
          transform: translateX(0);
       }
       to {
          transform: translateX(100px);
       }
    }
    
    @-moz-keyframes move {
       from {
          -moz-transform: translateX(0);
       }
       to {
          -moz-transform: translateX(100px);
       }
    }
    
    @-webkit-keyframes move {
       from {
          -webkit-transform: translateX(0);
       }
       to {
          -webkit-transform: translateX(100px);
       }
    }

    Mais nous pouvons utiliser la propriété raccourcie pour définir commodément toutes les propriétés de l'animation à la fois.

    div {
       animation: move 1s ease-in-out 0.5s 2 alternate;
       -moz-animation: move 1s ease-in-out 0.5s 2 alternate;
       -webkit-animation: move 1s ease-in-out 0.5s 2 alternate;
    }

    KEYFRAMES LIEN

    Chaque image clé décrit comment un élément d' animation doit rendre à un point donné dans la séquence d'animation. Les images clés prennent une valeur en pourcentage pour spécifier le temps: 0%est le début de l'animation, tout 100%est la fin. Vous pouvez éventuellement ajouter des images clés pour les animations intermédiaires.

    /* Animation from 0% to 100% */
    
    @keyframes move {
       0% { transform: translateX(0); }
       100% { transform: translateX(100px); }
    }
    
    /* Animation with intermediate keyframes */
    
    @keyframes move {
       0% { transform: translateX(0); }
       50% { transform: translateX(20px); }
       100% { transform: translateX(100px); }
    }

    Le W3C a beaucoup d'informations utiles et détaillées sur " CSS3 Animations ."

    STRUCTURE DE BASE DE NOTRE CURSEUR LIEN

    Maintenant que nous savons comment les transitions et l'animation de travail, nous allons voir comment créer notre curseur en utilisant seulement CSS3. Cette esquisse montre comment l'animation devrait fonctionner:

    fonction de curseur d'animation Sketch
    Comment les fonctions de curseur d'animation

    Comme vous pouvez le voir, le curseur sera un conteneur à l'intérieur duquel les images seront affichées.

    L'animation est très simple: l'image de suivre un chemin prédéfini, l' animation de la toppropriété et en changeant la z-indexet opacitypropriétés lorsque l'image revient à sa position initiale.

    Débutons droite dans le balisage HTML pour créer le curseur.

     

    2. Balise HTML Lien

    Le balisage HTML est très simple; tout cela est organisé et SEO-friendly. Voyons voir le code complet d'abord, puis comprendre en détail comment tout fonctionne.

    <div class="container">
       <div id="content-slider">
          <div id="slider">  <!-- Slider container -->
             <div id="mask">  <!-- Mask -->
    
             <ul>
             <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
             <a href="#"> <img src="images/img_1.jpg" alt="Cougar"/> </a>
             <div class="tooltip"> <h1>Cougar</h1> </div>
             </li>
    
             <li id="second" class="secondanimation">
             <a href="#"> <img src="images/img_2.jpg" alt="Lions"/> </a>
             <div class="tooltip"> <h1>Lions</h1> </div>
             </li>
    
             <li id="third" class="thirdanimation">
             <a href="#"> <img src="images/img_3.jpg" alt="Snowalker"/> </a>
             <div class="tooltip"> <h1>Snowalker</h1> </div>
             </li>
    
             <li id="fourth" class="fourthanimation">
             <a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a>
             <div class="tooltip"> <h1>Howling</h1> </div>
             </li>
    
             <li id="fifth" class="fifthanimation">
             <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing"/> </a>
             <div class="tooltip"> <h1>Sunbathing</h1> </div>
             </li>
             </ul>
    
             </div>  <!-- End Mask -->
             <div class="progress-bar"></div>  <!-- Progress Bar -->
          </div>  <!-- End Slider Container -->
       </div>
    </div>
    1. div id="slider"
      Ceci est le conteneur principal de l'élément coulissant. Il n'a pas de fonction particulière, mais nous allons avoir besoin de faire une pause l'animation.
    2. div id="mask"
      Nous allons l'utiliser pour cacher tout ce qui se passe en dehors du curseur. En plus de cacher le contenu, le masque nous permet d'afficher le contenu du curseur.
    3. li id="first" class="firstanimation"
      Chaque élément de la liste a un ID et une classe. L'ID affiche l'infobulle et la classe est liée à l'animation qui doit se produire.
    4. div class="tooltip"
      Cette affiche simplement le titre de l'image. Vous pouvez le modifier selon vos besoins; par exemple, en faisant cliquable et l'ajout d'une courte description.
    5. div class="progress-bar"
      Celui-ci contient la fonction qui indique la progression de l'animation.

    Maintenant, il est temps pour le fichier CSS.

    3. CSS Style de lien

    Nous allons créer la structure de base du curseur. Il aura la même taille de l'image. La propriété de la frontière sera utile pour créer un cadre autour de l'image.

    /* SLIDER STRUCTURE */
    
    #slider {
       background: #000;
       border: 5px solid #eaeaea;
       box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
       height: 320px;
       width: 680px;
       margin: 40px auto 0;
       overflow: visible;
       position: relative;
    }

    La maskclasse va se cacher tous les éléments qui se trouvent en dehors du curseur; sa hauteur doit être égale à la hauteur du curseur.

    /* HIDE ALL OUTSIDE OF THE SLIDER */
    
    #mask {
       overflow: hidden;
       height: 320px;
    }

    Enfin, pour trier la liste des images, nous aurons position: absoluteet top: -325px de sorte que toutes les images sont positionnées en dehors du curseur.

    /* IMAGE LIST */
    
    #slider ul {
       margin: 0;
       padding: 0;
       position: relative;
    }
    
    #slider li {
       width: 680px;  /* Width Image */
       height: 320px; /* Height Image */
       position: absolute;
       top: -325px; /* Original Position - Outside of the Slider */
       list-style: none;
    }

    Avec ces quelques lignes de code, nous avons créé notre curseur. Maintenant, nous avons juste besoin d'ajouter l'animation.

    4. CSS3 Keyframes animation Lien

    curseur d'animation
    animation d'image pour le curseur

    Avant de commencer avec l'animation, nous devons spécifier certains paramètres afin d'obtenir la vue de droite de l'animation.

    Comme nous le savons, la durée totale de l'animation sera de 25 secondes, mais nous devons savoir combien de keyframes est égal à 1 seconde.

    Donc, nous allons travailler sur une série d'opérations qui nous donne le nombre exact d'images clés sur la base des images que nous avons et la durée totale de l'animation. Voici les calculs:

    1. Définir le nombre total d'images à utiliser dans le curseur
      5
    2. Définir la longueur de l' animation pour chaque image
      5 secondes
    3. Définir la durée totale de l'animation
      Multipliez le nombre total d'images par la durée de chaque image:
      5 images × 5 secondes = 25 secondes
    4. Calculez combien keyframes est égal à un seconde
      Diviser le nombre total d'images clés par la durée totale de l'animation.
      100 images clés / 25 secondes = 4 images clés
      4 images clés = 1 seconde

    Avec tous ces calculs, nous pouvons maintenant appliquer l'animation CSS pour le curseur. Nous serons en mesure de mettre l'animation sur la boucle infinie, car chaque image suivra sa propre animation qui active une fois qu'il vient dans le curseur.

    #slider li.firstanimation {
       animation: cycle 25s linear infinite;
    }
    
    #slider li.secondanimation {
       animation: cycletwo 25s linear infinite;
    }
    
    #slider li.thirdanimation {
       animation: cyclethree 25s linear infinite;
    }
    
    #slider li.fourthanimation {
       animation: cyclefour 25s linear infinite;
    }
    
    #slider li.fifthanimation {
       animation: cyclefive 25s linear infinite;
    }

    Une fois les propriétés de l'animation ont été assignés, nous devons utiliser des images clés pour définir l'animation en mouvement.

    Suivant ce principe, nous pouvons connecter les animations à l'autre, même si elles sont séparées, ce qui nous donnera une boucle infinie.

    J'ai ajouté le opacityet z-indexpropriétés pour faire la transition d'une image à l'autre plus attrayant.

    Comme vous pouvez le voir dans le code, la première animation a plus keyframes que le reste. La raison en est que lorsque la galerie est commencé, la première image est positionnée pour faire place à la seconde image; mais quand la dernière image a terminé son animation, la première image doit avoir des images clés supplémentaires pour que l'utilisateur de ne pas voir une pause entre les cycles d'animation.

    Voici tout le code pour les animations:

    /* ANIMATION */
    
    @keyframes cycle {
       0%  { top: 0px; } /* When you start the slide, the first image is already visible */
       4%  { top: 0px; } /* Original Position */
       16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
       20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
       21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
       92% { top: -325px; opacity: 0; z-index: 0; }
       96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
       100%{ top: 0px; opacity: 1; }
    }
    
    @keyframes cycletwo {
       0%  { top: -325px; opacity: 0; } /* Original Position */
       16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
       20% { top: 0px; opacity: 1; }
       24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
       36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
       40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
       41% { top: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
       100%{ top: -325px; opacity: 0; z-index: -1; }
    }
    
    @keyframes cyclethree {
       0%  { top: -325px; opacity: 0; }
       36% { top: -325px; opacity: 0; }
       40% { top: 0px; opacity: 1; }
       44% { top: 0px; opacity: 1; }
       56% { top: 0px; opacity: 1; }
       60% { top: 325px; opacity: 0; z-index: 0; }
       61% { top: -325px; opacity: 0; z-index: -1; }
       100%{ top: -325px; opacity: 0; z-index: -1; }
    }
    
    @keyframes cyclefour {
       0%  { top: -325px; opacity: 0; }
       56% { top: -325px; opacity: 0; }
       60% { top: 0px; opacity: 1; }
       64% { top: 0px; opacity: 1; }
       76% { top: 0px; opacity: 1; z-index: 0; }
       80% { top: 325px; opacity: 0; z-index: 0; }
       81% { top: -325px; opacity: 0; z-index: -1; }
       100%{ top: -325px; opacity: 0; z-index: -1; }
    }
    @keyframes cyclefive {
       0%  { top: -325px; opacity: 0; }
       76% { top: -325px; opacity: 0; }
       80% { top: 0px; opacity: 1; }
       84% { top: 0px; opacity: 1; }
       96% { top: 0px; opacity: 1; z-index: 0; }
       100%{ top: 325px; opacity: 0; z-index: 0; }
    }

    Après avoir créé les animations, nous devons ajouter une barre de progression pour afficher la durée de chaque animation.

    5. Barre de progression Lien

    Barre de progression d'animation pour chaque image
    La barre de progression pour chaque animation

    Le processus de l'animation de la barre de progression est la même que celle pour le curseur. Tout d'abord, nous créons la barre de progression se:

    /* PROGRESS BAR */
    
    .progress-bar {
       position: relative;
       top: -5px;
       width: 680px;
       height: 5px;
       background: #000;
       animation: fullexpand 25s ease-out infinite;
    }

    Ne pas avoir peur de la syntaxe ici. Il a la même fonction que from to; vous pouvez voir que les images clés mis l'apparition et la disparition de chaque image.

    /* ANIMATION BAR */
    
    @keyframes fullexpand {
       /* In these keyframes, the progress-bar is stationary */
       0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
    
       /* In these keyframes, the progress-bar starts to come alive */
       4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
    
       /* In these keyframes, the progress-bar moves forward for 3 seconds */
       16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
    
       /* In these keyframes, the progress-bar has finished his path */
       17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
    
       /* In these keyframes, the progress-bar will disappear and then resume the cycle */
       18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
    }

    6. Tooltip Lien

    Le curseur est plus ou moins complète, mais nous allons ajouter quelques détails pour le rendre plus fonctionnel. Nous allons insérer infobulles pour les titres d'image qui seront visibles sur le vol stationnaire.

    Tooltip simple sur l'image
    infobulle simple

    Voici le CSS pour les infobulles:

    #slider .tooltip {
       background: rgba(0,0,0,0.7);
       width: 300px;
       height: 60px;
       position: relative;
       bottom: 75px;
       left: -320px;
    }
    
    #slider .tooltip h1 {
       color: #fff;
       font-size: 24px;
       font-weight: 300;
       line-height: 60px;
       padding: 0 0 0 10px;
    }

    Ici, nous avons fait que les titres d'image visible, mais vous pouvez faire de même pour un texte personnalisé, des liens ou tout ce que vous aimez.

    7. CSS3 Transitions lien

    tooltip animation
    Animer l'infobulle au survol

    Nous avons vu comment appliquer les transitions CSS3 aux éléments; maintenant, nous allons le faire pour les infobulles.

    Si vous vous souvenez, nous avons ajouté un ID à chaque liste ( first, second, etc.) pour avoir seulement l'infobulle associée à une image apparaît sur le vol stationnaire, plutôt que tous les infobulles apparaissent ensemble.

    #slider .tooltip {transition: all 0.3s ease-in-out;
    }
    
    #slider li#first: hover .tooltip,
    #slider li#second: hover .tooltip,
    #slider li#third: hover .tooltip,
    #slider li#fourth: hover .tooltip,
    #slider li#fifth: hover .tooltip {
       left: 0px;
    }

    8. Pause Et Redémarrer Lien

    Arrêtez curseur sur le vol stationnaire de la souris
    Arrêtez curseur sur le vol stationnaire de la souris

    Pour permettre aux utilisateurs de faire une pause pour lire le contenu ou regarder une image, il faut arrêter l'animation quand ils planent au-dessus d'une image. (Nous aurons aussi à arrêter l'animation de la barre de progression.)

    #slider: hover li,
    #slider: hover .progress-bar {
       animation-play-state: paused;
    }

    9. Demo Lien

    Enfin, nous avons atteint la fin du tutoriel. Le curseur est maintenant 100% complet!

    Pur CSS3 Cycle Curseur
    CSS3 pure démo vélo slider

    Découvrez la démo . Il fonctionne dans Firefox 5+, Safari 4+ et Google Chrome, ainsi que l'iPhone et l' iPad. Vous pouvez également télécharger le fichier ZIP .

    Merci à Massimo Righi pour ses images.

    10. Conclusion Lien

    L'effet est impressionnant, mais il est vrai, ce curseur est pas très polyvalent. Par exemple, pour ajouter d'autres images, vous devez éditer toutes les images clés. CSS3 a un grand potentiel, mais elle a des limites, et parfois JavaScript est préférable, en fonction de vos utilisateurs cibles.

    Ce curseur a quelques fonctionnalités intéressantes, comme une pause sur le vol stationnaire et uniques lien pour les images, qui permettent aux utilisateurs d'interagir avec le curseur. Si vous voulez plein soutien parmi les navigateurs , cela est impossible, donc JavaScript est recommandé. Malheureusement, l' animation CSS3 a de nombreuses limites; son manque de flexibilité , en particulier d' empêcher son utilisation à grande échelle pour l' instant.Espérons que cela va vous inciter à poursuivre l' étude de CSS3.