Как сделать слайдер с помощью animation и keyframes? HTML и CSS

Слайдер из 8 картинок. Нужно, чтоб автоматически каждая картинка 3 секунды стояла на месте и листалась в течение 2 секунд. И так 8 раз. Здесь нужно правильно прописать код
@keyframes slider, но не знаю как правильно.

<div id="slider">
    <figure>
        <img src="static/1.jpg">
        <img src="static/2.jpg">
        <img src="static/3.jpg">
        <img src="static/4.jpg">
        <img src="static/5.jpg">
        <img src="static/6.jpg">
        <img src="static/7.jpg">
        <img src="static/8.jpg">
    </figure>
</div>

#slider{
    overflow: hidden;
    width: 800px;
    height: 500px;
    border: 2px solid rebeccapurple;
    margin: 0 auto;
}

#slider figure{
    position: relative;
    width: 800%;
    margin: 0;
    left: 0;
    animation: 40s slider infinite;
}

#slider figure img{
    float: left;
    width: 20%;
}

@keyframes slider{
    0% { left: 0; }
    20% { left: 0; }
    33.3% { left: -100%; }
    53.3% { left: -100%; }
    66.6% { left: -200%; }
    86.6% { left: -200%; }
    66.6% { left: -300%; }
    79.9% { left: -300%; }
    100% { left: 0; }
}