Update animation speed

src/common/constants.js

@@ -22,7 +22,7 @@ export const CLASS_PREV_STEP_BTN = 'driver-prev-btn';
 export const CLASS_BTN_DISABLED = 'driver-disabled';
 
 // It must match the one set in the animations in CSS file
-export const ANIMATION_DURATION_MS = 200;
+export const ANIMATION_DURATION_MS = 400;
 
 // language=HTML
 export const POPOVER_HTML = `

src/core/element.js

@@ -231,7 +231,7 @@ export default class Element {
     const showAtPosition = this.getCalculatedPosition();
 
     // For first highlight, show it immediately because there won't be any animation
-    const animationDuration = !this.overlay.lastHighlightedElement ? 0 : ANIMATION_DURATION_MS * 2;
+    const animationDuration = !this.overlay.lastHighlightedElement ? 0 : ANIMATION_DURATION_MS;
 
     this.animationTimeout = this.window.setTimeout(() => {
       this.popover.show(showAtPosition);

src/driver.scss

@@ -120,11 +120,11 @@ div#driver-page-overlay {
   z-index: 100002 !important;
 
   // If you update this duration, make sure to update `ANIMATION_DURATION_MS` constant
-  -webkit-transition: all 0.2s;
-  -moz-transition: all 0.2s;
-  -ms-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  transition: all 0.2s;
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -ms-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 0.4s;
 }
 
 div#driver-highlighted-element-stage {
@@ -138,11 +138,11 @@ div#driver-highlighted-element-stage {
   display: none;
 
   // If you update this duration, make sure to update `ANIMATION_DURATION_MS` constant
-  -webkit-transition: all 0.2s;
-  -moz-transition: all 0.2s;
-  -ms-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  transition: all 0.2s;
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -ms-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 0.4s;
 }
 
 .driver-highlighted-element {