onboarding: Add bouncing ? next to hotspots.

Fixes #8124.
Adds bouncing question mark with twice the frequency of the
pulse.

static/js/hotspots.js

@@ -181,6 +181,7 @@ function insert_hotspot_into_DOM(hotspot) {
         '<div class="hotspot-icon" id="hotspot_' + hotspot.name + '_icon">' +
             '<span class="dot"></span>' +
             '<span class="pulse"></span>' +
+            '<div class="bounce"><span class="bounce-icon">?</span></div>' +
         '</div>';
 
     setTimeout(function () {

static/styles/hotspots.css

@@ -43,6 +43,32 @@
     }
 }
 
+.hotspot-icon .bounce {
+    -moz-animation: bounce 0.75s infinite;
+    -webkit-animation: bounce 0.75s infinite;
+    animation: bounce 0.75s infinite;
+}
+
+.hotspot-icon .bounce .bounce-icon {
+    position: absolute;
+    left: -5px;
+    bottom: 3px;
+    transform: rotate(7deg);
+    color: hsl(215, 47%, 50%);
+    font-size: 2.75em;
+    font-weight: 600;
+}
+
+@keyframes bounce {
+    0%, 100% {
+        -webkit-transform: translateY(0px);
+    }
+
+    50% {
+        -webkit-transform: translateY(4px);
+    }
+}
+
 /* popover */
 .hotspot.overlay {
     z-index: 104;