틀:1961 일본 광고/style.css

*{margin:0;padding:0;}

/* layout */
.box{
  position:relative;
  width:700px;
  height:500px;
  border:3px solid #000;
  overflow:hidden;
}

.slider1,.slider2{
  position:absolute;
  display:flex;
  flex-wrap:wrap;
  width:200px;
}
.slider1{
  right:220px;
}
.slider2{
  right:0px;
}

.slide1,.slide2,.slide3{
  width:100%;
  height:220px;
}
.slide1{background-color:#62e5cc;}
.slide2{background-color:#ffdd8a;}
.slide3{background-color:#d2a9dc;}

/* animation */
.slider1, .slider2 {
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.slider1 {
  animation-name: slidedown;
}
.slider2 {
  animation-name: slideup;
}

@keyframes slidedown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideup {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}