Add bounce animation to Pi-hole diagnosis warning triangle (#1990)

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/pi-hole/php/header.php

@@ -263,7 +263,7 @@ if($auth) {
                 <ul class="nav navbar-nav">
                     <li id="pihole-diagnosis" class="hidden">
                         <a href="messages.php">
-                            <i class="fa fa-exclamation-triangle"></i>
+                            <i class="fa fa-exclamation-triangle fa-2x icon-bounce"></i>
                             <span class="label label-warning" id="pihole-diagnosis-count"></span>
                         </a>
                     </li>

style/pi-hole.css

@@ -411,3 +411,33 @@ td.details-control {
 .form-control-feedback {
   right: 12px;
 }
+
+.icon-bounce {
+  display: inline-block;
+  position: relative;
+  animation: icon-bounce 1.5s infinite linear;
+}
+
+@keyframes icon-bounce {
+  0%,
+  20%,
+  50%,
+  70%,
+  90%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-15px);
+  }
+  60% {
+    transform: translateY(-8px);
+  }
+  80% {
+    transform: translateY(-4px);
+  }
+}
+
+.navbar-nav {
+  height: 50px;
+}