En regardant télé matin un autre jour, j'avais voulu me faire une petite horloge svg...
Le problème est qu' à 270° pour la trotteuse soit (45 s), ma transition plante comme si l'angle balayé était grand...Or par rapport à la position précédente, il n'est qu'à 6°...
J'ai l'impression que la fonction fin soit anime() ici-->(fonction récursive) dans animate démarre avant la fin de la transition... et il doit y avoir une valeur non définie pour l'angle à balayer qui devient très grand...d'où l'effet observé...
Plutôt que de long discours, voilà le problème :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<!DOCTYPE html>
 
<html>
<head>
    <title>horloge</title>
    <style>
         html, body {margin: 0;padding: 0;background: #87CEEB;}
     
     #horloge{
          position:absolute;
          top:50%;
          left:50%;
          width:40%;
          height:auto;
          transform:translate(-50%, -50%);
      }
    </style>
    <script src="snap.svg-min.js"></script>
</head>
<body>
   <svg viewBox="0 0 100 100" id="horloge"></svg>
   <script>
     var paper= Snap("#horloge");
     var seconde,minute,heure;
     var s,mn,h;
     
     
     function now(){
      let date = new Date();
       s = date.getSeconds();
       mn = date.getMinutes();
       h = date.getHours()%12; 
     }
     
     function calage_h_min(){
       minute.transform(`r${6*mn+s/10},50,50`);
       heure.transform(`r${30*h+mn/2+s/120},50,50`);
     }
     
     function initHorloge(){
           let attribute={'stroke-width' :2,stroke: 'white'};
           paper.circle(50,50,45).attr({
             'stroke-width' :3,
              stroke: 'white',
              fill:'none'
           });
        
           minute= paper.line(50,20,50,50).attr(attribute);
           heure=paper.line(50,26,50,50).attr(attribute);
           now();
           calage_h_min();
           paper.circle(50,50,3).attr('fill','white');
           seconde=paper.line(50,15,50,50).attr({
            'stroke-width' :1,
             stroke: 'red'
           }).transform(`r${6*s},50,50`);
           paper.circle(50,50,1.5).attr('fill','red');
    
         let grad=paper.g();
         for (let i=0 ; i<4 ;i++){
           grad.add( paper.circle(50,10,2).transform(`r${90*i},50,50`) );
         }
         
         for (let j=0 ; j<14 ;j++){
           grad.add( paper.circle(50,10,1).transform(`r${30*j},50,50`) );
         }
         grad.attr('fill','white');
         anime();
     }
 
     function anime(){
      now();
      calage_h_min();
      seconde.animate({transform:`r${6*s},50,50`},1000,mina.bounce,anime);//Pour 270°, ça plante
     }
    window.addEventListener('load',initHorloge);
   </script>
</body>
</html>
Mon but n'est pas de faire ça en pur CSS mais avec snap svg... et mina.bounce.

Merci pour vos lumières.

Remarque: je viens de faire un essai sans la transition mina.bounce, j'ai le même problème...donc rien à voir mais la fonction anime() doit tout de même redémarrer avant la fin de la rotation pour engendrer ce bug...

En fait, il faudrait que je sois synchro entre le démarrage de l'animation et le début d'une nouvelle seconde et de plus, que les 1000 ms de animate soient équivalentes à la seconde de now. Ce n'est pas gagné...