Mais teste iniciais

index.html

@@ -10,6 +10,22 @@
 body {font-family: Verdana, sans-serif; margin:0}
 img {vertical-align: middle;}
 
+
+@keyframes up {
+  from {margin-bottom: -40px;}
+  to {margin-bottom: 0;}
+}
+
+@keyframes from-left {
+  from {margin-left: -100%;}
+  to {margin-left: 0;}
+}
+
+@keyframes from-right {
+  from {margin-left: 100%;}
+  to {margin-left: 0;}
+}
+
 /* Slideshow container */
 .slideshow-container {
   position: relative;
@@ -101,8 +117,9 @@ img {vertical-align: middle;}
   max-height: 230px;
 }
 
-.slide a {
+.slide a.moan-link {
   padding: 5px 10px;
+  white-space: nowrap;
   background-color: #F0AF2A;
   position: absolute;
   z-index: 101;
@@ -118,10 +135,22 @@ img {vertical-align: middle;}
   transition: all .4s ease-in-out;
 }
 
-.slide a:hover {
+.slide a.moan-link:hover {
   background-color: #eec26b;
 }
 
+.moan-up {
+  animation: up .5s ease-in-out;
+}
+
+.moan-from-left {
+  animation: from-left .8s ease-in-out;
+}
+
+.moan-from-right {
+  animation: from-right .8s ease-in-out;
+}
+
 /* On smaller screens, decrease text size */
 @media only screen and (max-width: 310px) {
   .prev, .next,.text {font-size: 11px}
@@ -136,7 +165,7 @@ img {vertical-align: middle;}
 
    <img src="./Imagem1.png" alt=""/>     
 
-   <a href="#">Veja</a>
+   <a data-moan-direction="up" class="moan-link" href="#">Veja</a>
    
 </div>
 
@@ -144,7 +173,7 @@ img {vertical-align: middle;}
 
   <img src="./Captura.png" alt=""/>
 
-  <a href="#">Leia agora</a>
+  <a data-moan-direction="from-right" class="moan-link" href="#">Leia agora</a>
 
 </div>
 
@@ -208,12 +237,44 @@ function showSlides(n) {
   if (n < 1) {slideIndex = slides.length}
   for (i = 0; i < slides.length; i++) {
     slides[i].style.opacity = 0;  
+    let temp = slides[i].querySelector('.moan-link');
+    if (temp) {
+
+      let direction = temp.getAttribute("data-moan-direction")
+
+      if (direction === "up") {
+        temp.classList.remove('moan-up');
+      } else if (direction === "from-left") {
+        temp.classList.remove('moan-from-left');
+      } else if (direction === "from-right") {
+        temp.classList.remove('moan-from-right');
+      }
+      
+    }
   }
   for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" active", "");
   }
+
   slides[slideIndex-1].style.opacity = 1;  
+
   dots[slideIndex-1].className += " active";
+
+  let link = slides[slideIndex - 1].querySelector('.moan-link');
+
+  if (link) {
+
+    let direction = link.getAttribute("data-moan-direction")
+
+    if (direction === "up") {
+      link.classList.add('moan-up');
+    } else if (direction === "from-left") {
+      link.classList.add('moan-from-left');
+    } else if (direction === "from-right") {
+      link.classList.add('moan-from-right');
+    }
+   
+  }
 }
 </script>