CSS Animasi Slide Show

<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }

    .slider{
        width: 70%;
        height: 600px;
        overflow: hidden;
        margin: 20px 0px;
        position: relative;
    }

    .slider .view_slider{
        width: 500%;
        height: 600px;
        position: absolute;
        animation-name: slider;
        animation-duration: 30s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    .slider .view_slider img{
        width: 20%;
        height: 600px;
        float: left;
    }

    @keyframes slider{
        0% {left: 0px, opacity: 1}
        2% {left: 0px, opacity: 1}
        10% {left: 0px, opacity: 1}
        19% {left: 0px, opacity: 1}
        20% {opacity: 1}
        22% {left: -100%, opacity: 1}
        30% {left: -100%, opacity: 1}
        39% {left: -100%, opacity: 1}
        40% {opacity: 1}
        42% {left: -200%, opacity: 1}
        50% {left: -200%, opacity: 1}
        59% {left: -200%, opacity: 1}
        60% { opacity: 1}
        62% {left: -300%, opacity: 1}
        70% {left: -300%, opacity: 1}
        79% {left: -300%, opacity: 1}
        80% { opacity: 1}
        82% {left: -400%, opacity: 1}
        90% {left: -400%, opacity: 1}
        99% {left: -400%, opacity: 1}
        100% {left: 0px, opacity: 1}
    }
</style>