From aac143a090b6337be6197f4457a7e40c8b25c92b Mon Sep 17 00:00:00 2001
From: JoBCB <joaninha_quelhas@hotmail.com>
Date: Fri, 13 Nov 2020 18:59:46 +0000
Subject: [PATCH] test animation

---
 static/css/style.css | 64 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/static/css/style.css b/static/css/style.css
index 449bb1c..12d2bf4 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -577,8 +577,72 @@ a.paginate_button.next:after {
 
 div#home-top-div{
 	height: 661px;
+	width: 100%;
 	border:blue solid 1px;
+	overflow-x: hidden;
+	position: relative;
+}
+
+#home-top-div img {
+	position: absolute;
+	width: 100%;
+	max-width: 350px;
+	left: -600px;
+	padding: 60px;
+
+  animation-name: move;
+  animation-duration: 20s;
+  animation-iteration-count: infinite; /* or infinite*/
+  animation-fill-mode: forwards;
+  animation-direction: normal;
+  animation-timing-function: linear;  /* or ease*/
+}
+
+#home-top-div:nth-child(even) { padding-top: 60px;}
+#home-top-div:nth-child(odd) {  padding-top: 0px; }
+
+
+#home-top-div img:nth-of-type(1) {
+  animation-delay: 0s;
+}
+#home-top-div img:nth-of-type(2) {
+  animation-delay: 6s;
 }
+#home-top-div img:nth-of-type(3) {
+  animation-delay: 12s;
+   padding-top: 60px;
+}
+
+@keyframes move {
+  0% {
+  -webkit-transform:  translateX(0px);
+  -ms-transform:  translateX(0px);
+  -moz-transform: translateX(0px); 
+  transform: translateX(0px);
+  }
+  100% {
+  -webkit-transform:  translateX(1650px); /* 250vw*/
+  -ms-transform:  translateX(1650px);
+  -moz-transform: translateX(1650px); 
+  transform: translateX(1650px);
+  }
+}
+
+@-webkit-keyframes move{
+  0% {
+  -webkit-transform:  translateX(0px);
+  -ms-transform:  translateX(0px);
+  -moz-transform: translateX(0px); 
+  transform: translateX(0px);
+  }
+  100% {
+  -webkit-transform:  translateX(1650px); /* 250vw*/
+  -ms-transform:  translateX(1650px);
+  -moz-transform: translateX(1650px); 
+  transform: translateX(1650px);
+  }
+}
+
 
 img.home-recent-imgs, img.browsethearchive-imgs{
 	width: 100%;