Comment faire une animation de rotation des bordures en pointillés lisse comme `` les fourmis en marche ''

Question

Je travaille sur une animation CSS qui utilise des "rouages ​​et des chaînes", mais je ne suis pas en mesure de créer une séquence de rotation de bordure "fluide".

Vous pouvez voir dans ce violon Comment (actuellement) j'utilise un pseudo-élément pour générer un effet de "rotation". Cela se fait en "basculant" entre une bordure en pointillés blanc et en pointillés de couleur or, donnant l'impression que la "bordure tourne".

Ce que j'ai

#one{
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */

}
#two{
  -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateAntiClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateAntiClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateAntiClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */

 position:absolute;
    top:30px;
    left:42px;
    width:80px;
}

@-webkit-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-moz-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-o-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/******************************************************************************/

.chain{
    height:70px;
    width:80%;
    border:5px dashed gold;
    border-radius:30px;
    position:absolute;
    top:30px;
    left:40px;
          -webkit-animation: switchGoldBlackBorder 0.8s infinite; /* Safari 4+ */
  -moz-animation:    switchGoldBlackBorder 0.8s infinite; /* Fx 5+ */
  -o-animation:      switchGoldBlackBorder 0.8s infinite; /* Opera 12+ */
  animation:         switchGoldBlackBorder 0.8s infinite; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes switchBlackGoldBorder {
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@-moz-keyframes switchBlackGoldBorder{
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@-o-keyframes switchBlackGoldBorder {
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@keyframes switchBlackGoldBorder {  
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}



.chain:after{
    content:"";
    position:absolute;
    height:70px;
    border-radius:30px;
    width:100%;
    top:-5px;
    left:-5px;
    border:5px solid gold;
    z-index:-1;
          -webkit-animation: switchBlackGoldBorder 0.8s infinite; /* Safari 4+ */
  -moz-animation:    switchBlackGoldBorder 0.8s infinite; /* Fx 5+ */
  -o-animation:      switchBlackGoldBorder 0.8s infinite; /* Opera 12+ */
  animation:         switchBlackGoldBorder 0.8s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes switchGoldBlackBorder {
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@-moz-keyframes switchGoldBlackBorder{
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@-o-keyframes switchGoldBlackBorder {
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@keyframes switchGoldBlackBorder {  
    0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}

<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <defs>
        <circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/>
        <path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/>
    </defs>    
    <use xlink:href="#c"/>
    <use xlink:href="#d"/>
    <use xlink:href="#d" transform="rotate(45, 50, 50)"/>
</svg>

<svg id="two" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <use xlink:href="#one"/>    
</svg>
<div class="chain"></div>

Ainsi, dans la partie inférieure de l'extrait, vous pouvez voir comment j'ai généré "l'effet de chaîne tournante" en utilisant des images clés.

---

Ce que j'aimerais

Mon souhait global serait de générer quelque chose comme:

Pensez à une section transversale d'une bande transporteuse et à la façon dont les "engrenages à l'extrémité entraînent la bande". J'essaie de reproduire cela. (c'est-à-dire que les bits d'or de la bordure en pointillés doivent se trouver dans les creux de l'équipement et être `` tirés '' par celui-ci)

#one{
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */
border:5px dashed gold;
  border-radius:50%;
}

@-webkit-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <defs>
        <circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/>
        <path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/>
    </defs>    
    <use xlink:href="#c"/>
    <use xlink:href="#d"/>
    <use xlink:href="#d" transform="rotate(45, 50, 50)"/>
</svg>

mais avec des tirets dorés pour tenir dans les creux de l'équipement, ainsi que 80% de largeur de l'écran (si cela a du sens).

En fin de compte, je voudrais générer quelque chose comme cette image dépeint:

Voyez comment je veux que la chaîne "tourne"?

---

Mes problèmes actuels

• Étant donné que l'animation est "piratée" via l'utilisation d'un pseudo-élément, j'ai eu du mal à synchroniser la rotation de cette "chaîne".
• J'apprends toujours l'animation d'images clés, donc je suis sûr que ce n'est pas la meilleure méthode pour cela
• Encore une fois, svg est un nouveau concept pour moi, donc soyez réticent à l'utiliser (d'où la raison pour laquelle j'utilise CSS pour la 'chaîne')
• En fin de compte, je veux `` faire ressembler '' à l'engrenage qui tourne la chaîne, mais en ce moment, ils ressemblent à des animations d'éléments séparés complètement (et mal faites)

---

Answer 1

Animation de rouage et de chaîne:

J'ai entièrement refactorisé le code ( [~ # ~] css [~ # ~] et [~ # ~] html [~ # ~]), il est maintenant :

• plus court (surtout le css)
• plus simple
• plus réaliste: correction du problème de synchronisation entre la chaîne et les pignons et ajout d'un pignon manquant à droite car votre chaîne semblait flotter dans les airs:

DÉMO

L'approche est la même, animant l'angle de rotation des rouages ​​et dash-offset pour le chemin de chaîne. J'ai modifié le timing entre les deux animations pour donner l'impression que les rouages ​​tirent la chaîne.

Prise en charge du navigateur:

Comme IE ne supporte pas l'élément d'animation svg, j'ai également créé cette version de l'animation avec la bibliothèque snap.svg qui prend également en charge IE9 et plus (testé dans IE9 avec crossbrowsertesting ).

DÉMO avec IE support

var cont   = new Snap('#svg'),
    chain  = cont.select('#chain'),
    cogAcw = cont.select('#cog_acw'),
    cogCw  = cont.select('#cog_cw'),
    speed  = 500;  // Lower this number to make the animation faster

function infChain(el) {
    var len = el.getTotalLength();
    el.attr({"stroke-dasharray": len/62,"stroke-dashoffset": 0});
    el.animate({"stroke-dashoffset": -len/31}, speed, mina.linear, infChain.bind(null, el));
}
function rotateAcw(el) {
    el.transform('r22.5,20,20');
    el.animate({ transform: 'r-22.5,20,20' }, speed, mina.linear, rotateAcw.bind( null, el));
}
function rotateCw(el) {
    el.transform('r0,20,20');
    el.animate({ transform: 'r45,20,20' }, speed, mina.linear, rotateCw.bind( null, el));
}
infChain(chain);
rotateAcw(cogAcw);
rotateCw(cogCw);

svg {
    width:100%;
}

<script src="http://thisisa.simple-url.com/js/snapsvg.js"></script>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">
    <defs>
        <circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4" />
        <path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16" />
        <g id="cog_acw">
            <use xlink:href="#c" /><use xlink:href="#d" />
            <use xlink:href="#d" transform="rotate(45 20 20)" />
        </g>  
        <g id="cog_cw">
            <use xlink:href="#c" /><use xlink:href="#d" />
            <use xlink:href="#d" transform="rotate(45 20 20)" />
        </g>  
    </defs>
    <path id="chain" stroke-width="1" stroke="#000" fill="transparent" 
    d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89.4 26.5 89.4 13.5 80.8 13.5z" />
    <use  xlink:href="#cog_acw" />
    <use  transform="translate(60.5 0), rotate(19,20,20)" xlink:href="#cog_acw" />
    <use  transform="translate(-4.5 -4.5),scale(.8), rotate(0,20,20)" xlink:href="#cog_cw" />    
</svg>

---

svg{width:100%;}
#chain_st{
  -webkit-animation: dash 1s infinite linear;
  -moz-animation: dash 1s infinite linear;
  -o-animation: dash 1s infinite linear;
  animation: dash 1s infinite linear;
}
@-webkit-keyframes dash {
  to { stroke-dashoffset: -5; }
}
@-moz-keyframes dash {
  to { stroke-dashoffset: -5; }
}
@-o-keyframes dash {
  to { stroke-dashoffset: -5; }
}
@keyframes dash {
  to { stroke-dashoffset: -5; }
}

<svg id="one" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">
  <defs>
    <circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4"/>
    <path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16"/>
    <g id="cog">
      <use xlink:href="#c"/>
      <use xlink:href="#d"/>
      <use xlink:href="#d" transform="rotate(45 20 20)"/>
    </g>
  </defs>
  <g transform="translate(0,-7), scale(0.8), rotate(22.5 8 8)">
    <use xlink:href="#cog">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="-22.5 20 20" to="337.5 20 20" dur="8s" repeatCount="indefinite"/>
    </use>
  </g>
  <path id="chain_st" stroke-width="1" stroke="#000" fill="transparent" stroke-dasharray="2.6 2.45" d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89 26.5 89 13.5 80.8 13.5z" />
  <use class="rot" xlink:href="#cog">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate"from="22.5 20 20" to="-337.5 20 20" dur="8s" repeatCount="indefinite"/>
  </use>
  <g transform="translate(60.3 0)">
    <use class="" xlink:href="#cog">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="22.5 20 20" to="-337.5 20 20" dur="8s" repeatCount="indefinite"/>
    </use>
  </g>
</svg>

---

Réponse originale:

Vous pouvez utiliser un autre chemin en pointillés svg et animer la propriété offset de tiret avec une animation d'images clés.

Cela peut et doit être simplifié/modifié pour une utilisation "réelle":

• tous les éléments peuvent être contenus dans un <svg> tag (cela le rendrait plus simple et les deux rouages ​​+ chaîne pourraient être redimensionnés ensemble)
• La synchronisation entre la chaîne et le rouage n'est pas parfaite et la vitesse/taille de la chaîne doit être modifiée.

#one {
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Safari 4+ */
  -moz-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Fx 5+ */
  -o-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Opera 12+ */
  animation: rotateClockwiseAnimation 5s linear infinite;
  /* IE 10+, Fx 29+ */
}
#two {
  -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* Safari 4+ */
  -moz-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* Fx 5+ */
  -o-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* Opera 12+ */
  animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* IE 10+, Fx 29+ */
  position: absolute;
  top: 30px;
  left: 42px;
  width: 80px;
}
@-webkit-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-moz-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-o-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
/******************************************************************************/

#chain {
  width: 650px;
  position: absolute;
  top: 24px;
  left: 35px;
}
.chain_st {
  stroke-dasharray: 1.5;
  stroke-dashoffset: 10;
  -webkit-animation: dash 18s infinite linear;
  -moz-animation: dash 18s infinite linear;
  -o-animation: dash 18s infinite linear;
  animation: dash 18s infinite linear;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
@-moz-keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
@-o-keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}

<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  <defs>
    <circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25" />
    <path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85" />
  </defs>
  <use xlink:href="#c" />
  <use xlink:href="#d" />
  <use xlink:href="#d" transform="rotate(45, 50, 50)" />
</svg>

<svg id="two" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  <use xlink:href="#one" />
</svg>
<svg id="chain" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 70 10">
  <path class="chain_st" stroke-width="0.5" stroke="#000" fill="transparent" d="M60 1 Q65 1 65 5 Q65 9 60 9 H6 Q1 9 1 5 Q1 1 6 1z" />
</svg>

Answer 2

Et cette approche? J'utilise SVG pour les engrenages et le convoyeur. Les engrenages tournent selon votre exemple, mais j'utilise stroke-dasharray et animant stroke-dash-offset pour faire bouger la bande transporteuse.

Il a fallu un peu de temps pour obtenir la bonne longueur de convoyeur et le bon timing du tableau de bord, que vous auriez besoin de modifier à nouveau si vous modifiez la taille de l'engrenage ou la longueur du convoyeur.

#one{
  -webkit-animation: rotateClockwiseAnimation 4s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateClockwiseAnimation 4s linear infinite; /* Fx 5+ */
  -o-animation:      rotateClockwiseAnimation 4s linear infinite; /* Opera 12+ */
  animation:         rotateClockwiseAnimation 4s linear infinite; /* IE 10+, Fx 29+ */

}
#two{
  -webkit-animation: rotateAntiClockwiseAnimation 4s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateAntiClockwiseAnimation 4s linear infinite; /* Fx 5+ */
  -o-animation:      rotateAntiClockwiseAnimation 4s linear infinite; /* Opera 12+ */
  animation:         rotateAntiClockwiseAnimation 4s linear infinite; /* IE 10+, Fx 29+ */

 position:absolute;
    top:30px;
    left:42px;
    width:80px;
}

@-webkit-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-moz-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-o-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}


/******************************************************************************/

#chain
{
  -webkit-animation: conveyor 0.5s linear infinite; /* Safari 4+ */
  -moz-animation:    conveyor 0.5s linear infinite; /* Fx 5+ */
  -o-animation:      conveyor 0.5s linear infinite; /* Opera 12+ */
  animation:         conveyor 0.5s linear infinite; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes conveyor {
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}
@-moz-keyframes conveyor {
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}
@-o-keyframes conveyor {
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}
@keyframes conveyor {  
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}

<svg width="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 100">
    <defs>
        <circle id="c" cx="0" cy="0" r="30" stroke="#808080" fill="none" stroke-width="25"/>
        <path id="d" stroke="#808080" stroke-width="16" d="M0,-50 v15 M0,50 v-15 M-50,0 h15 M50,0 h-15"/>

        <g id="gear">
          <use xlink:href="#c"/>
          <use xlink:href="#d"/>
          <use xlink:href="#d" transform="rotate(45)"/>
        </g>
    </defs>
  
  <rect id="chain2"
          x="43" y="23" width="598" height="74" rx="37"
          stroke="gold" stroke-width="2" fill="none"/>

    <g transform="translate(27,27) scale(0.5)">
      <g id="one">
        <use xlink:href="#gear"/>
      </g>
    </g>

    <g transform="translate(80,60) scale(0.8)">
      <g id="two">
        <use xlink:href="#gear"/>
      </g>
    </g>
  
  <rect id="chain"
          x="43" y="23" width="598" height="74" rx="37"
          stroke="gold" stroke-width="5" fill="none"
          stroke-dasharray="14 15.06"/>
</svg>

Answer 3

Note: J'ai refait toute l'animation en box-shadow, car l'utilisation des bordures en pointillés n'a pas de sortie cohérente sur tous les navigateurs.

Travail

.. et Works cross-browser.
FF 5+, GC 4+, IE9 +, Safari 4+, Opera 12.1 +

Vous pouvez essayer ceci en utilisant box-shadow:

• Pour faire les dents des engrenages, utilisez une ombre à boîte avec un rayon d'étalement négatif. La taille de mon équipement était par exemple 50px, Donc pour contourner box-shadow Avec d=8px, J'ai utilisé -46px Comme rayon de propagation.

• J'ai positionné les dents en utilisant la géo-coordonnées et j'ai utilisé seulement 8 dents pour simplifier.

• Maintenant, pour le convoyeur droit, nous devons connaître la distance entre les dents. Nous obtenons cela par ce qui suit:

• 2*pi*(gear radius) / no. of teeth = (pi * r) / 4
  Mine = (55 * 3.1415) / 4 = 43 (Environ)
  J'ai pris un rayon de 55 car les dents ont un rayon de 4 pixels et sont à 1 pixel de la circonférence de l'engrenage.

• Pour aligner les convoyeurs droits haut et bas, ils doivent être traduits par un multiple de leur distance. Pour mon équipement, je les traduis par 43px.

L'échafaudage

VIOLON

body {
    background: rgba(25,80,175, 0.4);
}
.rect {
    height: 116px;
    width: 401px;
    border-radius: 58px;
    position: relative;
    overflow: hidden;
}

.rect:before, .rect:after {
    content: '';
    position: absolute;
    left: 46px; /*50-half width*/
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 43px 0 0 0 white, 86px 0 0 0 white, 129px 0 0 0 white, 172px 0 0 0 white, 215px 0 0 0 white, 258px 0 0 0 white, 301px 0 0 0 white;
    -webkit-animation: Apple 0.3s linear infinite;
    -moz-animation: Apple 0.3s linear infinite;
    animation: Apple 0.3s linear infinite;
}
.rect:before {
    top: 0px;
}
.rect:after {
    bottom: 0px;
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}
@-webkit-keyframes Apple {
    0% {-webkit-transform: translatex(0px);}
    100% {-webkit-transform: translateX(-43px);}
}
@-moz-keyframes Apple {
    0% {-moz-transform: translatex(0px);}
    100% {-moz-transform: translateX(-43px);}
}
@keyframes Apple {
    0% {transform: translatex(0px);}
    100% {transform: translateX(-43px);}
}
.left, .right {
    content: '';
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-color: #222;
    box-shadow: 0 55px 0 -46px white, 55px 0 0 -46px white, 0 -55px 0 -46px white, -55px 0 0 -46px white,
        39px 39px 0 -46px white, -39px -39px 0 -46px white, 39px -39px 0 -46px white, -39px 39px 0 -46px white;
    -webkit-animation: mango 2.4s linear infinite;
    -moz-animation: mango 2.4s linear infinite;
    animation: mango 2.4s linear infinite;
}
.left {
    top: -108px;
    left: 0px;
}
.right {
    top: -208px;
    left: 301px;
}
@-webkit-keyframes mango {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes mango {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@keyframes mango {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}

<div class="rect"></div>
<div class="left"></div>
<div class="right"></div>

---

Version finale

... avec engrenages. La chaîne est actuellement pointé anéanti!

VIOLON

body {
    background-color: white;
}
.rect {
    height: 120px;
    width: 401px;
    border-radius: 58px;
    position: relative;
}

.rect:before, .rect:after {
    content: '';
    position: absolute;
    left: 40px; /*50-half width*/
    height: 10px;
    width: 20px;
    background: transparent;
    box-shadow: 43px 0 0 0 gold, 86px 0 0 0 gold, 129px 0 0 0 gold, 172px 0 0 0 gold, 215px 0 0 0 gold, 258px 0 0 0 gold, 301px 0 0 0 gold, 344px 0 0 0 gold; /*keep adding 43 to x-axis*/
    -webkit-animation: Apple 0.6s linear infinite;
    -moz-animation: Apple 0.6s linear infinite;
    animation: Apple 0.6s linear infinite;
    overflow: hidden;
}
.rect:before {
    top: 0px;
}
.rect:after {
    bottom: 0px;
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}
@-webkit-keyframes Apple {
    0% {-webkit-transform: translatex(0px);}
    100% {-webkit-transform: translateX(-43px);}
}
@-moz-keyframes Apple {
    0% {-moz-transform: translatex(0px);}
    100% {-moz-transform: translateX(-43px);}
}
@keyframes Apple {
    0% {transform: translatex(0px);}
    100% {transform: translateX(-43px);}
}
.left, .right {
    content: '';
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    -webkit-animation: mango 4.8s linear infinite;
    -moz-animation: mango 4.8s linear infinite;
    animation: mango 4.8s linear infinite;
}
.left {
    top: -110px;
    left: 0px;
}
.right {
    top: -210px;
    left: 344px;
}
.left:before, .left:after, .right:before, .right:after {
    height: 20px;
    width: 20px;
    content: '';
    position: absolute;
    background-color: gold;
}
.left:before, .right:before {
    box-shadow: 50px 50px 0 0 gold, -50px 50px 0 0 gold, 0 100px 0 0 gold;
    top: -10px;
    left: 40px;
}
.left:after, .right:after {
    transform: rotate(45deg);
    top: 5px;
    left: 76px;
    box-shadow: 0px 100px 0 0 gold, 50px 50px 0 0 gold, -50px 50px 0 0 gold;
}
@-webkit-keyframes mango {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes mango {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@keyframes mango {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
.cover {
    height: 104px;
    width: 446px;
    border-radius: 50px;
    position: relative;
    background: rgba(255,255,255,1);
    top: -312px;
    left; -2px;
    
}
.gear, .gear2 {
    height: 100px;
    width: 100px;
    background: dimgray;
    border-radius: 50%;
    position: relative;
    -webkit-animation: gear 4.8s linear infinite;
    -moz-animation: gear 4.8s linear infinite;
    animation: gear 4.8s linear infinite;
}
.gear {
    top: -414px;
  
}
.gear2 {
    top: -514px;
    left: 345px;
}
.gear:before, .gear:after, .gear2:before, .gear2:after {
    height: 20px;
    width: 20px;
    content: '';
    position: absolute;
    background-color: dimgray;
    
}
.gear:before, .gear2:before {
    box-shadow: 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray, 0 100px 0 0 dimgray;
    top: -10px;
    left: 40px;
}
.gear:after, .gear2:after {
    transform: rotate(45deg);
    top: 5px;
    left: 76px;
    box-shadow: 0px 100px 0 0 dimgray, 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray;
}
@-webkit-keyframes gear {
    0% {-webkit-transform: rotate(22.5deg);}
    100% {-webkit-transform: rotate(-337.5deg);}
}
@-moz-keyframes gear {
    0% {-moz-transform: rotate(22.5deg);}
    100% {-moz-transform: rotate(-337.5deg);}
}
@keyframes gear {
    0% {transform: rotate(22.5deg);}
    100% {transform: rotate(-337.5deg);}
}

<div class="rect"></div>
<div class="left"></div>
<div class="right"></div>
<div class="cover"></div>
<div class="gear"></div>
<div class="gear2"></div>

Version finale (denture arrondie)

.rect {
    height: 120px;
    width: 401px;
    border-radius: 58px;
    position: relative;
}
.rect:before, .rect:after {
    content: '';
    position: absolute;
    left: 40px; /*50-half width*/
    height: 10px;
    width: 20px;
    box-shadow: 43px 0 0 0 gold, 86px 0 0 0 gold, 129px 0 0 0 gold, 172px 0 0 0 gold, 215px 0 0 0 gold, 258px 0 0 0 gold, 301px 0 0 0 gold, 344px 0 0 0 gold; /*keep adding 43 to x-axis*/
    -webkit-animation: translate 0.6s linear infinite;
    -moz-animation: translate 0.6s linear infinite;
    animation: translate 0.6s linear infinite;
    overflow: hidden;
}
.rect:before {top: 0px;}
.rect:after {
    bottom: 0px;
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}
@-webkit-keyframes translate {
    0% {-webkit-transform: translatex(0px);}
    100% {-webkit-transform: translateX(-43px);}
}
@-moz-keyframes translate {
    0% {-moz-transform: translatex(0px);}
    100% {-moz-transform: translateX(-43px);}
}
@keyframes translate {
    0% {transform: translatex(0px);}
    100% {transform: translateX(-43px);}
}
.left, .right {
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    -webkit-animation: rotate 4.8s linear infinite;
    -moz-animation: rotate 4.8s linear infinite;
    animation: rotate 4.8s linear infinite;
}
.left {
    top: -110px; left: 0px;
}
.right {
    top: -210px; left: 344px;
}
.left:before, .left:after, .right:before, .right:after {
    height: 20px;
    width: 20px;
    content: '';
    position: absolute;
    background: gold;
}
.left:before, .right:before {
    box-shadow: 50px 50px 0 0 gold, -50px 50px 0 0 gold, 0 100px 0 0 gold;
    top: -10px;
    left: 40px;
}
.left:after, .right:after {
    transform: rotate(45deg);
    top: 5px;
    left: 76px;
    box-shadow: 0px 100px 0 0 gold, 50px 50px 0 0 gold, -50px 50px 0 0 gold;
}
@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes rotate {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
.cover {
    height: 104px;
    width: 446px;
    border-radius: 50px;
    position: relative;
    background: rgba(255,255,255,1);
    top: -312px;
    left; -2px;
}
.gear, .gear2, .gear3 {
    height: 100px;
    width: 100px;
    background: transparent;
    box-shadow: inset 0 0 0px 35px dimgray, inset 0 0 0px 40px #444;
    border-radius: 50%;
    position: relative;
    -webkit-animation: rotate 4.8s linear infinite;
    -moz-animation: rotate 4.8s linear infinite;
    animation: rotate 4.8s linear infinite;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.gear {top: -414px;}
.gear2 {top: -514px; left: 345px;}
.gear:before, .gear:after, .gear2:before, .gear2:after,  .gear3:before, .gear3:after {
    height: 20px;
    width: 20px;
    content: '';
    border-radius: 20%;
    position: absolute;
    background: dimgray;
}
.gear:before, .gear2:before, .gear3:before {
    box-shadow: 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray, 0 100px 0 0 dimgray;
    top: -10px; left: 40px;
}
.gear:after, .gear2:after, .gear3:after {
    transform: rotate(45deg);
    top: 5px; left: 76px;
    box-shadow: 0px 100px 0 0 dimgray, 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray;
}
.gear3 {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
    top: -504px;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}

<div class="rect"></div>
<div class="left"></div>
<div class="right"></div>
<div class="cover"></div>
<div class="gear"></div>
<div class="gear2"></div>
<div class="gear3"></div>

FIDDLE - DENTS ARRONDIES

---

REMARQUE: Pour augmenter la vitesse d'animation, vous devez simplement diminuer la durée d'animation de chaque élément proportionnellement .

Violon (rapide)

Answer 4

Voici une méthode différente pour réaliser une animation de rouage en utilisant CSS. Cette méthode a été testée dans IE11, IE10, Firefox, Chrome, Opera et Safari.

• Deux éléments circulaires pour engrenages/pignons avec insert box-shadow pour produire le cercle intérieur. Les dents sont produites par des éléments enfants (normal + pseudo) qui tournent autour de l'axe.
• La partie incurvée de la courroie est réalisée en utilisant la même technique que les rayons de l'engrenage et sont positionnés de telle sorte qu'ils sont toujours entre les dents.
• Un élément de conteneur rectangulaire dont les bordures supérieure et inférieure sont imitées à l'aide d'un dégradé linéaire. Le fond de cet élément (autre que le dégradé en haut et en bas) est une couleur unie qui est en quelque sorte un inconvénient. Cette couleur unie est utilisée pour masquer la moitié de l'élément circulaire de chaque côté.
• L'animation est réalisée de deux manières (a) en tournant constamment les deux éléments circulaires et (b) en changeant constamment la position d'arrière-plan des arrière-plans dégradés.

.chain {
    margin: 45px auto;
    height: 100px;
    width: 310px;
    position: relative;
    background: -webkit-linear-gradient(0deg, gold 50%, transparent 50%), -webkit-linear-gradient(0deg, gold 50%, transparent 50%), white;
    background: -moz-linear-gradient(90deg, gold 50%, transparent 50%), -moz-linear-gradient(90deg, gold 50%, transparent 50%), white;
    background: linear-gradient(90deg, gold 50%, transparent 50%), linear-gradient(90deg, gold 50%, transparent 50%), white;
    background-size: 41px 5px;
    background-repeat: repeat-x;
    background-position: 20px 0px, 20px 95px;
    -webkit-animation: bgPos 1s infinite linear;
    -moz-animation: bgPos 1s infinite linear;
    animation: bgPos 1s infinite linear;
}
.belt, .belt-after, .belt .spokes, .belt .spokes:before, .belt .spokes:after, .belt-after .spokes, .belt-after .spokes:before, .belt-after .spokes:after {
    position: absolute;
    content:'';
    height: 90px;
    width:15px;
    top: 0px;
    border-top: 5px solid gold;
    border-bottom: 5px solid gold;
    z-index: -1;
}
.belt, .belt-after {
    -webkit-animation: borderAnim 8s infinite linear;
    -moz-animation: borderAnim 8s infinite linear;
    animation: borderAnim 8s infinite linear;
}
.belt .spokes, .belt-after .spokes {
    top: -5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.belt .spokes:before, .belt-after .spokes:before {
    top: -5px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}
.belt .spokes:after, .belt-after .spokes:after {
    top: -5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.belt {
    left: -16px;
}
.belt-after {
    right: -16px;
}
.gear {
    content:'';
    position: absolute;
    top: 5px;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    -webkit-animation: borderAnim 8s infinite linear;
    -moz-animation: borderAnim 8s infinite linear;
    animation: borderAnim 8s infinite linear;
    box-shadow: inset 0px 0px 0px 30px gray;
    z-index: 4;
}
.gear:before, .gear .spokes, .gear .spokes:before, .gear .spokes:after {
    position: absolute;
    content:'';
    height: 88px;
    width:15px;
    top: -5px;
    border-top: 6px solid gray;
    border-bottom: 6px solid gray;
}
.gear:before {
    left: 37px;
    -webkit-transform: rotate(22.5deg);
    -moz-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
}
.gear .spokes {
    left: 37px;
    -webkit-transform: rotate(67.5deg);
    -moz-transform: rotate(67.5deg);
    transform: rotate(67.5deg);
}
.gear .spokes:before {
    top: -6px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.gear .spokes:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}
.chain .belt + .gear {
    left:-52px;
}
.chain .belt-after + .gear {
    right: -52.5px;
}
.gear-small {
    content:'';
    position: absolute;
    left: -92px;
    top: -20px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    -webkit-animation: borderAnim 6s infinite linear reverse;
    -moz-animation: borderAnim 6s infinite linear reverse;
    animation: borderAnim 6s infinite linear reverse;
    box-shadow: inset 0px 0px 0px 20px gray;
    z-index: -2;
}
.gear-small:before {
    position: absolute;
    content:'';
    left: 21px;
    top: -3px;
    height: 48px;
    width: 10px;
    border-top:4px solid gray;
    border-bottom: 4px solid gray;
}
.gear-small .spokes, .gear-small .spokes:before, .gear-small .spokes:after {
    position: absolute;
    content:'';
    left: 21px;
    top: -3px;
    height: 48px;
    width: 10px;
    border-top:4px solid gray;
    border-bottom: 4px solid gray;
}
.gear-small .spokes {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.gear-small .spokes:before {
    left: 0px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}
.gear-small .spokes:after {
    left: 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
@-webkit-keyframes borderAnim {
    0% {
        -webkit-transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes borderAnim {
    0% {
        -moz-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}
@keyframes borderAnim {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@-webkit-keyframes bgPos {
    0% {
        background-position: 20px 0px, -20px 95px;
    }
    100% {
        background-position: -20px 0px, 20px 95px;
    }
}
@-moz-keyframes bgPos {
    0% {
        background-position: 20px 0px, -20px 95px;
    }
    100% {
        background-position: -20px 0px, 20px 95px;
    }
}
@keyframes bgPos {
    0% {
        background-position: 20px 0px, -20px 95px;
    }
    100% {
        background-position: -20px 0px, 20px 95px;
    }
}

<div class="chain">
    <div class="gear-small">
        <div class="spokes"></div>
    </div>
    <div class="belt">
        <div class="spokes"></div>
    </div>
    <div class="gear">
        <div class="spokes"></div>
    </div>
    <div class="belt-after">
        <div class="spokes"></div>
    </div>
    <div class="gear">
        <div class="spokes"></div>
    </div>
</div>

Bonus: Voici toute l'animation avec un interrupteur marche/arrêt :) Cliquez (tirez) sur la poignée de la chaîne pour activer ou désactiver l'animation.

.container {
  position: relative;
}
.chain {
  margin: 45px 100px;
  height: 100px;
  width: 310px;
  position: relative;
  background: -webkit-linear-gradient(0deg, gold 50%, transparent 50%), -webkit-linear-gradient(0deg, gold 50%, transparent 50%), white;
  background: -moz-linear-gradient(90deg, gold 50%, transparent 50%), -moz-linear-gradient(90deg, gold 50%, transparent 50%), white;
  background: linear-gradient(90deg, gold 50%, transparent 50%), linear-gradient(90deg, gold 50%, transparent 50%), white;
  background-size: 41px 5px;
  background-repeat: repeat-x;
  background-position: 20px 0px, 20px 95px;
  -webkit-animation: bgPos 1s infinite linear;
  -moz-animation: bgPos 1s infinite linear;
  animation: bgPos 1s infinite linear;
}
.belt,
.belt-after,
.belt .spokes,
.belt .spokes:before,
.belt .spokes:after,
.belt-after .spokes,
.belt-after .spokes:before,
.belt-after .spokes:after {
  position: absolute;
  height: 90px;
  width: 15px;
  top: 0px;
  border-top: 5px solid gold;
  border-bottom: 5px solid gold;
  z-index: -1;
}
.belt,
.belt-after {
  -webkit-animation: borderAnim 8s infinite linear;
  -moz-animation: borderAnim 8s infinite linear;
  animation: borderAnim 8s infinite linear;
}
.belt .spokes,
.belt-after .spokes {
  top: -5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.belt .spokes:before,
.belt .spokes:after,
.belt-after .spokes,
.belt-after .spokes:before,
.belt-after .spokes:after {
  content: '';
}
.belt .spokes:before,
.belt-after .spokes:before {
  top: -5px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}
.belt .spokes:after,
.belt-after .spokes:after {
  top: -5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.belt {
  left: -16px;
}
.belt-after {
  right: -16px;
}
.gear {
  position: absolute;
  top: 5px;
  height: 90px;
  width: 90px;
  border-radius: 100%;
  -webkit-animation: borderAnim 8s infinite linear;
  -moz-animation: borderAnim 8s infinite linear;
  animation: borderAnim 8s infinite linear;
  box-shadow: inset 0px 0px 0px 30px gray, inset 0px 0px 0px 40px white, inset 0px 0px 0px 50px tomato;
  z-index: 4;
}
.gear:before,
.gear .spokes,
.gear .spokes:before,
.gear .spokes:after {
  position: absolute;
  content: '';
  height: 88px;
  width: 15px;
  top: -5px;
  border-top: 6px solid gray;
  border-bottom: 6px solid gray;
}
.gear:before {
  left: 37px;
  -webkit-transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
}
.gear .spokes {
  left: 37px;
  -webkit-transform: rotate(67.5deg);
  -moz-transform: rotate(67.5deg);
  transform: rotate(67.5deg);
}
.gear .spokes:before {
  top: -6px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.gear .spokes:after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}
.chain .belt + .gear {
  left: -52px;
}
.chain .belt-after + .gear {
  right: -52.5px;
}
.gear-small {
  position: absolute;
  left: -91px;
  top: -20px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  -webkit-animation: borderAnim 8s 0.4s infinite linear;
  -moz-animation: borderAnim 6s infinite linear;
  animation: borderAnim 6s infinite linear;
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
  box-shadow: inset 0px 0px 0px 20px gray;
  z-index: -2;
}
.gear-small:before {
  position: absolute;
  content: '';
  left: 21px;
  top: -3px;
  height: 48px;
  width: 10px;
  border-top: 4px solid gray;
  border-bottom: 4px solid gray;
}
.gear-small .spokes,
.gear-small .spokes:before,
.gear-small .spokes:after {
  position: absolute;
  content: '';
  left: 21px;
  top: -3px;
  height: 48px;
  width: 10px;
  border-top: 4px solid gray;
  border-bottom: 4px solid gray;
}
.gear-small .spokes {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.gear-small .spokes:before {
  left: 0px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}
.gear-small .spokes:after {
  left: 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
@-webkit-keyframes borderAnim {
  0% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-moz-keyframes borderAnim {
  0% {
    -moz-transform: rotate(360deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@keyframes borderAnim {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes bgPos {
  0% {
    background-position: 20px 0px, -20px 95px;
  }
  100% {
    background-position: -20px 0px, 20px 95px;
  }
}
@-moz-keyframes bgPos {
  0% {
    background-position: 20px 0px, -20px 95px;
  }
  100% {
    background-position: -20px 0px, 20px 95px;
  }
}
@keyframes bgPos {
  0% {
    background-position: 20px 0px, -20px 95px;
  }
  100% {
    background-position: -20px 0px, 20px 95px;
  }
}
#pull-switch {
  display: none;
  /* no need to display checkbox */
}
#switch {
  position: absolute;
  left: 77px;
  top: 50px;
  border-right: 2px dotted tomato;
  height: 200px;
  width: 15px;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
  transition: height 0.5s;
  z-index: 10;
}
#handle {
  display: block;
  position: absolute;
  /* left: width of chain div (15px) + half of border (1px) - radius of handle (8px)*/
  left: 8px;
  bottom: 0%;
  background-color: tomato;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer
}
#pull-switch:checked + #switch > #handle {
  background-color: seagreen;
}
#pull-switch:checked + #switch {
  height: 225px;
  border-color: seagreen;
}
#pull-switch ~ .chain .gear-small,
#pull-switch ~ .chain .belt,
#pull-switch ~ .chain .belt-after,
#pull-switch ~ .chain .gear,
#pull-switch ~ .chain {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}
#pull-switch:checked ~ .chain .gear-small,
#pull-switch:checked ~ .chain .belt,
#pull-switch:checked ~ .chain .belt-after,
#pull-switch:checked ~ .chain .gear,
#pull-switch:checked ~ .chain {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  animation-play-state: running;
}
#pull-switch:checked ~ .chain .belt + .gear,
#pull-switch:checked ~ .chain .belt-after + .gear {
  box-shadow: inset 0px 0px 0px 30px gray, inset 0px 0px 0px 40px white, inset 0px 0px 0px 50px seagreen;
}

<div class="container">
  <input type="checkbox" id="pull-switch" />
  <div id="switch">
    <label for="pull-switch" id="handle"></label>
  </div>
  <div class="chain">
    <div class="gear-small">
      <div class="spokes"></div>
    </div>
    <div class="belt">
      <div class="spokes"></div>
    </div>
    <div class="gear">
      <div class="spokes"></div>
    </div>
    <div class="belt-after">
      <div class="spokes"></div>
    </div>
    <div class="gear">
      <div class="spokes"></div>
    </div>
  </div>
</div>

---

Réponse originale: (Ne fonctionne pas sur Firefox en raison d'un bug de bordure en pointillés et les tirets sont plus proches dans IE ce qui le rend laid).

Vous pouvez réaliser l'animation de rotation de bordure en utilisant une combinaison des éléments suivants:

• Deux éléments circulaires (utilisant border-radius: 50%) avec une bordure en pointillés de chaque côté pour former la partie courbe de la bordure.
• Un élément de conteneur rectangulaire dont les bordures supérieure et inférieure sont imitées à l'aide de linear-gradient. Le fond de cet élément (autre que le dégradé en haut et en bas) est une couleur unie qui est en quelque sorte un inconvénient. Cette couleur unie est utilisée pour masquer la moitié de l'élément circulaire de chaque côté.
• L'animation est réalisée de deux manières (a) en tournant constamment les deux éléments circulaires et (b) en changeant constamment le background-position des arrière-plans dégradés.
• Les rouages ​​sont également des éléments circulaires où les rayons sont faits avec des bordures en pointillés et la partie intérieure solide est générée à l'aide d'un encart box-shadow. Le pignon est tourné de manière à ce que la bordure de la chaîne soit toujours entre les bords du pignon.

.chain {
  margin: 45px auto;
  height: 100px;
  width: 300px;
  position: relative;
  background: -webkit-linear-gradient(0deg, gold 50%, transparent 50%), -webkit-linear-gradient(0deg, gold 50%, transparent 50%), white;
  background: -moz-linear-gradient(90deg, gold 50%, transparent 50%), -moz-linear-gradient(90deg, gold 50%, transparent 50%), white;
  background: linear-gradient(90deg, gold 50%, transparent 50%), linear-gradient(90deg, gold 50%, transparent 50%), white;
  background-size: 30px 5px;
  background-repeat: repeat-x;
  background-position: 0px 0px, 5px 95px;
  -webkit-animation: bgPos 4s infinite linear;
  -moz-animation: bgPos 4s infinite linear;
  animation: bgPos 4s infinite linear;
}
.chain .before,
.chain .after {
  position: absolute;
  content: '';
  height: 90px;
  width: 90px;
  top: 0px;
  border-radius: 50%;
  border: 5px dashed gold;
  -webkit-animation: borderAnim 2s infinite linear;
  -moz-animation: borderAnim 2s infinite linear;
  animation: borderAnim 2s infinite linear;
  z-index: -2;
}
.chain .before {
  left: -45px;
}
.chain .after {
  right: -45px;
}
.chain .gear {
  content: '';
  position: absolute;
  top: 0px;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  border: 5px dashed gray;
  -webkit-transform: rotate(16deg);
  -moz-transform: rotate(16deg);
  transform: rotate(16deg);
  -webkit-animation: gearAnim 2s infinite linear;
  -moz-animation: gearAnim 2s infinite linear;
  animation: gearAnim 2s infinite linear;
  box-shadow: inset 0px 0px 0px 30px gray;
  z-index: 4;
}
.chain .before + .gear {
  left: -45px;
}
.chain .after + .gear {
  right: -45px;
}
.gear-small {
  content: '';
  position: absolute;
  left: -95px;
  top: -23px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 3px dashed gray;
  -webkit-transform: rotate(16deg);
  -moz-transform: rotate(16deg);
  transform: rotate(16deg);
  -webkit-animation: gearAnim 6s infinite linear reverse;
  -moz-animation: gearAnim 6s infinite linear reverse;
  animation: gearAnim 6s infinite linear reverse;
  box-shadow: inset 0px 0px 0px 20px gray;
  z-index: -2;
}
@-webkit-keyframes borderAnim {
  0% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-moz-keyframes borderAnim {
  0% {
    -moz-transform: rotate(360deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@keyframes borderAnim {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes bgPos {
  0% {
    background-position: 610px 0px, 0px 95px;
  }
  100% {
    background-position: 0px 0px, 600px 95px;
  }
}
@-moz-keyframes bgPos {
  0% {
    background-position: 610px 0px, 0px 95px;
  }
  100% {
    background-position: 0px 0px, 600px 95px;
  }
}
@keyframes bgPos {
  0% {
    background-position: 610px 0px, 0px 95px;
  }
  100% {
    background-position: 0px 0px, 600px 95px;
  }
}
@-webkit-keyframes gearAnim {
  0% {
    -webkit-transform: rotate(376deg);
  }
  100% {
    -webkit-transform: rotate(16deg);
  }
}
@-moz-keyframes gearrAnim {
  0% {
    -moz-transform: rotate(376deg);
  }
  100% {
    -moz-transform: rotate(16deg);
  }
}
@keyframes gearAnim {
  0% {
    transform: rotate(376deg);
  }
  100% {
    transform: rotate(16deg);
  }
}

<div class="chain">
  <div class="gear-small"></div>
  <div class="before"></div>
  <div class="gear"></div>
  <div class="after"></div>
  <div class="gear"></div>
</div>

Enfin, je recommanderais toujours d'utiliser l'approche SVG pour cela, car au-delà d'un certain point, de telles animations avec CSS deviendraient très compliquées :)

Answer 5

Vous pouvez essayer de modifier le rouage afin qu'il s'adapte mieux au lieu de modifier la bordure div pour se mettre en place sur le rouage. Son plus facile à manipuler des graphiques que CSS.

Et à partir de là, peut-être pour diviser l'animation en chaîne en trois ou quatre parties pour la rendre plus robuste.

Ensuite, vous pouvez ajuster les vitesses du pignon et de la chaîne pour les faire correspondre, masquer une moitié de la chaîne, y ajouter des div uniquement avec les bordures supérieure et inférieure et faire la même chose mais à l'opposé à l'autre extrémité. (en utilisant le clip, la position et l'index z).

Quelque chose comme ça:

En théorie du moins, ce serait mon approche (sans oublier que j'utiliserais JS au lieu de ce workflow).

Answer 6

Utilisation de Canvas

Les formes (pignon et chaîne) et l'effet d'animation des fourmis en marche (bordure en pointillés) peuvent également être obtenus en utilisant un dessin sur toile. La prise en charge du navigateur pour Canvas est assez bonne .

Bien que Canvas ait l'inconvénient d'être basé sur un raster (contrairement à SVG, qui est basé sur une forme), ce n'est pas un gros problème tant que le canvas n'est pas trop mis à l'échelle. Le canevas devrait être meilleur lors de la gestion d'un grand nombre d'objets et d'animations en temps réel. Ici est un article intéressant du MSDN sur le moment d'utiliser Canvas ou SVG.

---

Construction de formes

Les éléments/formes clés impliqués dans cette animation sont les suivants:

• Chaîne
• Cog gauche
• Pignon droit
• Top Cog

Chaîne : La chaîne est créée en dessinant deux lignes horizontales (en utilisant les commandes lineTo) qui sont connectées à chaque extrémité par des demi-cercles (dessinés en utilisant la commande arc). L'effet de bordure en pointillés est obtenu en utilisant la méthode setLineDash pour le trait. La méthode setLineDash prend deux paramètres où le premier représente la longueur du tiret et le second représente l'espace entre les tirets.

L'extrait ci-dessous montre le code minimal requis pour créer la chaîne:

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var chain = {
    offset: 0,
    Paint: function() {
      ctx.beginPath();
      ctx.moveTo(75, 50);
      ctx.lineTo(533, 50);
      ctx.arc(533, 100, 50, (Math.PI * 1.5), (Math.PI * 0.5), false);
      ctx.lineTo(75, 150);
      ctx.arc(75, 100, 50, (Math.PI * 0.5), (Math.PI * 1.5), false);
      ctx.lineWidth = 5;
      ctx.fillStyle = 'transparent';
      ctx.setLineDash([12, 14.16]);
      ctx.lineDashOffset = this.offset;
      ctx.fill();
      ctx.stroke();
    }
  };

  chain.Paint();
}

/* CSS needed only for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
canvas {
  margin: 50px auto;
}

<canvas id='canvas' width='650' height='300'></canvas>

Roues dentées : Les trois roues dentées (gauche, droite et haut) sont obtenues en utilisant les mêmes commandes et la seule différence est leur positionnement à l'écran (et le rayon pour celui du haut).

Les rayons ou les dents des pignons sont créés à l'aide de la commande arc (comme pour les demi-cercles de la chaîne) et utilisent le même rayon. Leur lineDashoffset est ajusté de manière à occuper l'espace exact restant entre les tirets de la chaîne.

Le corps des rouages ​​est composé de deux cercles, celui extérieur ayant un rayon plus grand que l'intérieur. Le paramètre de remplissage evenodd est utilisé pour définir la couleur d'arrière-plan (tan dans cet exemple) uniquement sur le cercle extérieur et en laissant celui intérieur transparent.

L'extrait ci-dessous montre le code minimal requis pour créer les rouages:

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var cog = {
    Paint: function(x, y, r, offset) {
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.lineWidth = 5;
      ctx.setLineDash([12, 14.16]);
      ctx.lineDashOffset = offset;
      ctx.strokeStyle = 'tan';
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(x, y, (r - 2), 0, Math.PI * 2, true);
      ctx.arc(x, y, (r / 2.5), 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fillStyle = 'tan';
      ctx.fill('evenodd');
    }
  };

  function Paint() {
    var cog_radius = 50;
    var cog_t_x = 30,
      cog_t_y = 40,
      cog_t_offset = 20.5,
      cog_l_x = 75,
      cog_l_y = 100,
      cog_l_offset = 24.25,
      cog_r_x = 533,
      cog_r_offset = 11.25;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    cog.Paint(cog_t_x, cog_t_y, (cog_radius / 2), cog_t_offset);
    ctx.restore();
    ctx.save();
    cog.Paint(cog_l_x, cog_l_y, cog_radius, cog_l_offset);
    ctx.restore();
    ctx.save();
    cog.Paint(cog_r_x, cog_l_y, cog_radius, cog_r_offset);
    ctx.restore();
  }
  Paint();

}

/* CSS needed only for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
canvas {
  margin: 50px auto;
}

<canvas id='canvas' width='650' height='300'></canvas>

---

Animation

L'animation est réalisée en décalant le lineDashOffset des traits dans chaque image de l'animation. L'animation elle-même est déclenchée à l'aide de window.requestAnimationFrame méthode qui appelle la fonction Paint (passée en argument) à intervalles réguliers. Le taux de rappel est généralement de 60 fois par seconde (en citant MDN). Décaler le décalage lors de chaque repeinture du canevas donne l'impression qu'il est animé.

L'animation peut être arrêtée à tout moment en appelant la méthode cancelAnimationFrame . Cela peut être fait soit sur la base d'une interaction de l'utilisateur (comme le clic, le survol, etc.), soit sur la base d'un délai d'attente.

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var anim, onState = false,
    counter = 0;
  var chain = {
    offset: 0,
    Paint: function() {
      ctx.beginPath();
      ctx.moveTo(75, 50);
      ctx.lineTo(533, 50);
      ctx.arc(533, 100, 50, (Math.PI * 1.5), (Math.PI * 0.5), false);
      ctx.lineTo(75, 150);
      ctx.arc(75, 100, 50, (Math.PI * 0.5), (Math.PI * 1.5), false);
      ctx.lineWidth = 5;
      ctx.fillStyle = 'transparent';
      ctx.setLineDash([12, 14.16]);
      ctx.lineDashOffset = this.offset;
      ctx.fill();
      ctx.stroke();
    }
  };

  function Paint(type) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    chain.offset += (6.54 / 10);
    ctx.save();
    chain.Paint();
    ctx.restore();
    if (type) {
      anim = window.requestAnimationFrame(function() {
        Paint(type);
      })
    }
  }
  Paint(true);
}

/* CSS needed only for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
canvas {
  margin: 50px auto;
}

<canvas id='canvas' width='650' height='300'></canvas>

---

Image complète

En rassemblant toutes les pièces, l'extrait ci-dessous fournit l'image complète de la chaîne et des rouages ​​avec l'animation:

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var anim, onState = false,
    counter = 0;
  var cog_radius = 50;
  var cog_t_x = 30,
    cog_t_y = 40,
    cog_t_offset = 20.5,
    cog_l_x = 75,
    cog_l_y = 100,
    cog_l_offset = 24.25,
    cog_r_x = 533,
    cog_r_offset = 11.25;
  var chain = {
    offset: 0,
    Paint: function() {
      ctx.beginPath();
      ctx.moveTo(75, 50);
      ctx.lineTo(533, 50);
      ctx.arc(533, 100, 50, (Math.PI * 1.5), (Math.PI * 0.5), false);
      ctx.lineTo(75, 150);
      ctx.arc(75, 100, 50, (Math.PI * 0.5), (Math.PI * 1.5), false);
      ctx.lineWidth = 5;
      ctx.fillStyle = 'transparent';
      ctx.setLineDash([12, 14.16]);
      ctx.lineDashOffset = this.offset;
      ctx.fill();
      ctx.stroke();
    }
  };
  var cog = {
    Paint: function(x, y, r, offset) {
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.lineWidth = 5;
      ctx.setLineDash([12, 14.16]);
      ctx.lineDashOffset = offset;
      ctx.strokeStyle = 'tan';
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(x, y, (r - 2), 0, Math.PI * 2, true);
      ctx.arc(x, y, (r / 2.5), 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fillStyle = 'tan';
      ctx.fill('evenodd');
    }
  };

  function Paint(type) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    chain.offset += (6.54 / 10);
    cog_l_offset -= (6.54 / 10);
    cog_r_offset -= (6.54 / 10);
    cog_t_offset += (6.54 / 10);
    ctx.save();
    cog.Paint(cog_t_x, cog_t_y, (cog_radius / 2), cog_t_offset);
    ctx.restore();
    ctx.save();
    chain.Paint();
    ctx.restore();
    ctx.save();
    cog.Paint(cog_l_x, cog_l_y, cog_radius, cog_l_offset);
    ctx.restore();
    ctx.save();
    cog.Paint(cog_r_x, cog_l_y, cog_radius, cog_r_offset);
    ctx.restore();
    if (type) {
      anim = window.requestAnimationFrame(function() {
        Paint(type);
      })
    }
  }
  Paint(true);
}

/* CSS needed only for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
canvas {
  margin: 50px auto;
}

<canvas id='canvas' width='650' height='300'></canvas>

---

Interaction de l'utilisateur

Comme mentionné précédemment, l'interaction utilisateur peut également être ajoutée à l'aide d'écouteurs d'événements (addEventListener). Si l'action doit être déclenchée par une action de l'utilisateur sur une forme ou une section spécifique du canevas, la méthode pointInPath peut être utilisée pour vérifier si le point se trouve dans la section requise du canevas.

Ici est le lien vers une démo CodePen qui a également ces interactions utilisateur (et quelques autres trucs supplémentaires).

^{Remarque: L'explication sur la façon d'ajouter des interactions utilisateur, etc., dépasse le cadre de cette réponse particulière. Cependant, si vous avez besoin d'aide, vous pouvez me trouver dans ce salon de discussion .}