add animation, stop automatic slideshow when interacted with

assets/scss/snap-gallery.scss

@@ -30,13 +30,28 @@ $gap: var(--gap);
 }
 
 .snap-slideshow {
-
   // Hide all contained images except the first
   .snap-image:not(:first-child) {
     display: none;
   }
 }
 
+// Animation
+.snap-slideshow .snap-image,
+.snap-lightbox .snap-lightbox-inner {
+  animation: 1s fade;
+
+  @keyframes fade {
+    from {
+      opacity: .4
+    }
+
+    to {
+      opacity: 1
+    }
+  }
+}
+
 .snap-lightbox {
   /** Default lightbox to hidden */
   display: none;
@@ -180,6 +195,7 @@ $gap: var(--gap);
 // Position arrows for left/right
 .snap-prev {
   left: 0;
+
   .snap-lightbox & span {
     left: 0.5%;
   }
@@ -187,6 +203,7 @@ $gap: var(--gap);
 
 .snap-next {
   right: 0;
+
   .snap-lightbox & span {
     right: 0.5%;
   }