Browse Source

test animation

master
JoBCB 4 years ago
parent
commit
aac143a090
  1. 64
      static/css/style.css

64
static/css/style.css

@ -577,8 +577,72 @@ a.paginate_button.next:after {
div#home-top-div{ div#home-top-div{
height: 661px; height: 661px;
width: 100%;
border:blue solid 1px; 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{ img.home-recent-imgs, img.browsethearchive-imgs{
width: 100%; width: 100%;

Loading…
Cancel
Save