fix issue #56 #55

Author: soyaine

Diff for: 02 - JS + CSS Clock/index-SOYAINE.html

@@ -53,7 +53,8 @@
         position: relative;
         width: 100%;
         height: 100%;
-        transform: translateY(-3px); /* account for the height of the clock hands */
+        /*  transform: translateY(-3px); /* account for the height of the clock hands */
+        /* canceled according to https://github.com/soyaine/JavaScript30/issues/55 */
     }
 
     .hand {
@@ -87,8 +88,6 @@
                 0 0 0 2px rgba(0,0,0,0.1),
                 0 0 10px rgba(0,0,0,0.2);
         transform: translate(-50%, -50%);
-        /*transition: all .05s;*/
-
     }
 
     .hour-hand {
@@ -104,15 +103,15 @@
         width: 45%;
         height:5px;
         margin-top: -2.5px;
-        transition: all .1s;
+        transition: all .1s cubic-bezier(0.9, 0.54, 0.26, 1.68);
     }
 
     .second-hand {
         height: 2px;
         margin-top: -1px;
         border-bottom-left-radius: 100%;
         border-top-left-radius: 100%;
-        transition: all .05s;
+        transition: all .05s cubic-bezier(0.9, 0.54, 0.26, 1.68);
         background-color: red;
     }
 
@@ -141,10 +140,10 @@
 //		解决指针跳顿问题【第一种方法】
 //		在发生跳顿的角度值处，将 CSS 的 `transition` 属性去掉
 		if (secondDeg === 90) secHand.style.transition = 'all 0s';
-		else secHand.style.transition = 'all 0.05s';
+		else secHand.style.transition = 'all 0.05s cubic-bezier(0.9, 0.54, 0.26, 1.68)';
 
 		if (minDeg === 90) minHand.style.transition = 'all 0s';
-		else minHand.style.transition = 'all 0.1s';
+		else minHand.style.transition = 'all 0.1s cubic-bezier(0.9, 0.54, 0.26, 1.68)';
 
 //		时针间距过大不做处理
 //		if (hourDeg === 116.5) hourHand.style.transition = 'all 0s';