Animate the button when reordering authentication backends

refs #8369

application/views/scripts/form/reorder-authbackend.phtml

@@ -39,7 +39,7 @@
         </td>
         <td data-base-target="_self">
 <?php if ($i > 0): ?>
-          <button type="submit" name="backend_newpos" class="link-like icon-only" value="<?= sprintf(
+          <button type="submit" name="backend_newpos" class="link-like icon-only animated move-up" value="<?= sprintf(
             '%s|%s',
             $backendNames[$i],
             $i - 1
@@ -53,7 +53,7 @@
           </button>
 <?php endif; ?>
 <?php if ($i + 1 < count($backendNames)): ?>
-          <button type="submit" name="backend_newpos" class="link-like icon-only" value="<?= sprintf(
+          <button type="submit" name="backend_newpos" class="link-like icon-only animated move-down" value="<?= sprintf(
             '%s|%s',
             $backendNames[$i],
             $i + 1

public/css/icinga/animation.less

@@ -79,4 +79,255 @@
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
   }
+}
+
+@-moz-keyframes move-vertical {
+  0% {
+    -moz-transform: translate(0, 100%);
+    -o-transform: translate(0, 100%);
+    -webkit-transform: translate(0, 100%);
+    transform: translate(0, 100%);
+  }
+
+  17% {
+    -moz-transform: translate(0, 66%);
+    -o-transform: translate(0, 66%);
+    -webkit-transform: translate(0, 66%);
+    transform: translate(0, 66%);
+  }
+
+  33% {
+    -moz-transform: translate(0, 33%);
+    -o-transform: translate(0, 33%);
+    -webkit-transform: translate(0, 33%);
+    transform: translate(0, 33%);
+  }
+
+  50% {
+    -moz-transform: translate(0, 0);
+    -o-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+
+  67% {
+    -moz-transform: translate(0, -33%);
+    -o-transform: translate(0, -33%);
+    -webkit-transform: translate(0, -33%);
+    transform: translate(0, -33%);
+  }
+
+  83% {
+    -moz-transform: translate(0, -66%);
+    -o-transform: translate(0, -66%);
+    -webkit-transform: translate(0, -66%);
+    transform: translate(0, -66%);
+  }
+
+  100% {
+    -moz-transform: translate(0, -100%);
+    -o-transform: translate(0, -100%);
+    -webkit-transform: translate(0, -100%);
+    transform: translate(0, -100%);
+  }
+}
+@-webkit-keyframes move-vertical {
+  0% {
+    -moz-transform: translate(0, 100%);
+    -o-transform: translate(0, 100%);
+    -webkit-transform: translate(0, 100%);
+    transform: translate(0, 100%);
+  }
+
+  17% {
+    -moz-transform: translate(0, 66%);
+    -o-transform: translate(0, 66%);
+    -webkit-transform: translate(0, 66%);
+    transform: translate(0, 66%);
+  }
+
+  33% {
+    -moz-transform: translate(0, 33%);
+    -o-transform: translate(0, 33%);
+    -webkit-transform: translate(0, 33%);
+    transform: translate(0, 33%);
+  }
+
+  50% {
+    -moz-transform: translate(0, 0);
+    -o-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+
+  67% {
+    -moz-transform: translate(0, -33%);
+    -o-transform: translate(0, -33%);
+    -webkit-transform: translate(0, -33%);
+    transform: translate(0, -33%);
+  }
+
+  83% {
+    -moz-transform: translate(0, -66%);
+    -o-transform: translate(0, -66%);
+    -webkit-transform: translate(0, -66%);
+    transform: translate(0, -66%);
+  }
+
+  100% {
+    -moz-transform: translate(0, -100%);
+    -o-transform: translate(0, -100%);
+    -webkit-transform: translate(0, -100%);
+    transform: translate(0, -100%);
+  }
+}
+@-o-keyframes move-vertical {
+  0% {
+    -moz-transform: translate(0, 100%);
+    -o-transform: translate(0, 100%);
+    -webkit-transform: translate(0, 100%);
+    transform: translate(0, 100%);
+  }
+
+  17% {
+    -moz-transform: translate(0, 66%);
+    -o-transform: translate(0, 66%);
+    -webkit-transform: translate(0, 66%);
+    transform: translate(0, 66%);
+  }
+
+  33% {
+    -moz-transform: translate(0, 33%);
+    -o-transform: translate(0, 33%);
+    -webkit-transform: translate(0, 33%);
+    transform: translate(0, 33%);
+  }
+
+  50% {
+    -moz-transform: translate(0, 0);
+    -o-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+
+  67% {
+    -moz-transform: translate(0, -33%);
+    -o-transform: translate(0, -33%);
+    -webkit-transform: translate(0, -33%);
+    transform: translate(0, -33%);
+  }
+
+  83% {
+    -moz-transform: translate(0, -66%);
+    -o-transform: translate(0, -66%);
+    -webkit-transform: translate(0, -66%);
+    transform: translate(0, -66%);
+  }
+
+  100% {
+    -moz-transform: translate(0, -100%);
+    -o-transform: translate(0, -100%);
+    -webkit-transform: translate(0, -100%);
+    transform: translate(0, -100%);
+  }
+}
+@-ms-keyframes move-vertical {
+  0% {
+    -moz-transform: translate(0, 100%);
+    -o-transform: translate(0, 100%);
+    -webkit-transform: translate(0, 100%);
+    transform: translate(0, 100%);
+  }
+
+  17% {
+    -moz-transform: translate(0, 66%);
+    -o-transform: translate(0, 66%);
+    -webkit-transform: translate(0, 66%);
+    transform: translate(0, 66%);
+  }
+
+  33% {
+    -moz-transform: translate(0, 33%);
+    -o-transform: translate(0, 33%);
+    -webkit-transform: translate(0, 33%);
+    transform: translate(0, 33%);
+  }
+
+  50% {
+    -moz-transform: translate(0, 0);
+    -o-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+
+  67% {
+    -moz-transform: translate(0, -33%);
+    -o-transform: translate(0, -33%);
+    -webkit-transform: translate(0, -33%);
+    transform: translate(0, -33%);
+  }
+
+  83% {
+    -moz-transform: translate(0, -66%);
+    -o-transform: translate(0, -66%);
+    -webkit-transform: translate(0, -66%);
+    transform: translate(0, -66%);
+  }
+
+  100% {
+    -moz-transform: translate(0, -100%);
+    -o-transform: translate(0, -100%);
+    -webkit-transform: translate(0, -100%);
+    transform: translate(0, -100%);
+  }
+}
+@keyframes move-vertical {
+  0% {
+    -moz-transform: translate(0, 100%);
+    -o-transform: translate(0, 100%);
+    -webkit-transform: translate(0, 100%);
+    transform: translate(0, 100%);
+  }
+
+  17% {
+    -moz-transform: translate(0, 66%);
+    -o-transform: translate(0, 66%);
+    -webkit-transform: translate(0, 66%);
+    transform: translate(0, 66%);
+  }
+
+  33% {
+    -moz-transform: translate(0, 33%);
+    -o-transform: translate(0, 33%);
+    -webkit-transform: translate(0, 33%);
+    transform: translate(0, 33%);
+  }
+
+  50% {
+    -moz-transform: translate(0, 0);
+    -o-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+
+  67% {
+    -moz-transform: translate(0, -33%);
+    -o-transform: translate(0, -33%);
+    -webkit-transform: translate(0, -33%);
+    transform: translate(0, -33%);
+  }
+
+  83% {
+    -moz-transform: translate(0, -66%);
+    -o-transform: translate(0, -66%);
+    -webkit-transform: translate(0, -66%);
+    transform: translate(0, -66%);
+  }
+
+  100% {
+    -moz-transform: translate(0, -100%);
+    -o-transform: translate(0, -100%);
+    -webkit-transform: translate(0, -100%);
+    transform: translate(0, -100%);
+  }
 }

public/css/icinga/forms.less

@@ -129,6 +129,16 @@ div.spinner {
   }
 }
 
+button.animated.active {
+  &.move-up i:before {
+    .animate(move-vertical 500ms infinite linear);
+  }
+
+  &.move-down i:before {
+    .animate(move-vertical 500ms infinite linear reverse);
+  }
+}
+
 button, .button-like {
   font-size: 0.9em;
   font-weight: bold;