test animation

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%;