<style type="text/css"> /*=== ???????????????? ================================= */ .slide { position : relative; overflow : hidden; /* ?????????????????????????????????? */ width : 500px; height : 500px; margin : auto; /* ???????????????????????????? */ background : #fff; } /*=== ?????????? ======================================= */ .slide img { display : block; position : absolute; /* ???????????????????????????????? */ width : inherit; height : inherit; opacity : 0; animation : slideAnime 8s ease infinite; } /*=== ???????????????????????????????????????? ========= */ .slide img:nth-of-type(1) { animation-delay: 0s } .slide img:nth-of-type(2) { animation-delay: 2s } .slide img:nth-of-type(3) { animation-delay: 4s } .slide img:nth-of-type(4) { animation-delay: 6s } /*=== ???????????????????????? ========================= */ @keyframes slideAnime{ 0% { opacity: 0 } 3% { opacity: 1 } 25% { opacity: 1 } 28% { opacity: 0 } 100% { opacity: 0 } } </style>