test animation

This commit is contained in:
JoBCB 2020-11-13 18:59:46 +00:00
parent f7fa411bcf
commit aac143a090

View File

@ -577,9 +577,73 @@ 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%;
}