Newer
Older
cafe-2022 / naoyuki / slideshow.css
@TAKEDA Naoyuki TAKEDA Naoyuki on 10 Jul 2022 622 bytes slideshow
.slide{
   position: relative;
   width: 50%;
   padding-top: 0%;
   }

.slide img{
      position: absolute;
      width: 100%;
      height: auto;
      top:    0%;
      left:   50%;
      opacity: 0%;
      animation: slideshow 24s linear infinite;
      }


.slide img:nth-child(2){
                        animation-delay: 8s;
			}

.slide img:nth-child(3){
                        animation-delay: 16s;
			}


@keyframes slideshow{
          0%{
             opacity: 0%;
             }

 10%{
    opacity: 1;
    }

 28%{
     opacity: 1;
     }

 38%{
     opacity: 0;
     }

  100%{
      opacity: 0;
      }
}