[CSS] 슬라이드하기

이미지가 3개 기준

HTML

<div id="main_slide">
    <div class="wrap">
        <div id="slider">
            <div>
                <img src="">
                <img src="">
                <img src="">
            </div>
        </div>
    </div>
</div>

CSS

@keyframes slidy {
    0% { left: 0px; }
    20% { left: 0px; }
    30% { left: -100%; }
    50% { left: -100%; }
    60% { left: -200%; }
    80% { left: -200%; }
    100% { left: 0px; }
}

#main_slide {width: 100%;}
#main_slide > div.wrap > div#slider {overflow: hidden; position: relative;}
div#slider > div > img {width: 33.333333333333333333333333%; float: left;}
div#slider > div { 
    position: relative;
    width: 300%;
    margin: 0;
    top:0;
    left: 0;
    text-align: left;
    font-size: 0;
    -webkit-animation: 20s slidy ease-in-out infinite;
    animation: 20s slidy ease-in-out infinite;
}