css3로 슬라이드 배너

Question

오직 css3을 사용하여 배너를 만들어야합니다. 기본 구조를 만들었지 만 슬라이드 배너처럼 작동하지 않습니다. 슬라이드를 5 초 동안 기다렸다가 추가로 움직이기를 원하지만 빠르게 움직이고 있습니다. fiddle

.main{ width:500px; overflow:hidden; border:solid 1px #000; } 
.banner { width:1500px; animation: myfirst 10s infinite 2s} 
.one { float:left; background:#F00; height:200px; width:500px} 
.two { float:left; background:#0F0; height:200px; width:500px} 
.three { float:left; background:#00F; height:200px; width:500px} 

@keyframes myfirst { 
    from {margin-left: 0px;} 
    to {margin-left:-1000px} 
} 



<div class="main"> 
<div class="banner"> 
<div class="one"></div> 
<div class="two"></div> 
<div class="three"></div> 
</div> 
</div> 

Answer 1

이 솔루션 당신을 도울 수 있습니다.

<div class="main"> 
     <div class="banner"> 
      <div class="one item"></div> 
      <div class="two item"></div> 
      <div class="three item"></div> 
     </div> 
    </div> 
.main { 
     width: 500px; 
     overflow: hidden; 
     border: solid 1px #000; 
    } 
    .banner { 
     width: 1500px; 
     /*animation: myfirst 15s infinite 2s*/ 
    } 
    .one { 
     float: left; 
     background: #F00; 
     height: 200px; 
     width: 500px; 
     animation: myfirst 15s infinite 2s; 
    } 
    .two { 
     float: left; 
     background: #0F0; 
     height: 200px; 
     width: 500px; 
     animation: myfirst 15s infinite 2s; 
    } 
    .three { 
     float: left; 
     background: #00F; 
     height: 200px; 
     width: 500px; 
     animation: myfirst 15s infinite 2s; 
    } 
    .item{ 
     position: relative; 
    } 
    @keyframes myfirst { 
     0%{ 
      left: 0; 
     } 
     15%{ 
      left: 0; 
     } 
     30%{ 
      left: -500px; 
     } 
     45%{ 
      left: -500px; 
     } 
     60%{ 
      left: -500px; 
     } 
     75%{ 
      left: -1000px; 
     } 
     90%{ 
      left: -1000px; 
     } 
     100%{ 
      left: 0px; 
     } 
    } 

-webkit animation을 추가해야합니다.