css animation 버튼 누르면 슬라이드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        #visual {
            width: 600px;
            height: 300px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        @keyframes slide {
            0% { margin-left:0; }
            20% { margin-left:0; }
            25% { margin-left:-100%; }
            45% { margin-left:-100%; }
            50% { margin-left:-200%; }
            70% { margin-left:-200%; }
            75% { margin-left:-300%; }
            95% { margin-left:-300%; }
            100% { margin-left:0; }
        }

        .imgslide {
            width: 400%;
            height: 300px;
            float: left;
            position: relative;
            transition: all 0.5s;
        }


        .imgslide li {
            width: 25%;
            height: 600px;
            float: left;
            background-size: cover;
            background-position: center;
        }

        .imgslide li:nth-child(1) {
            background-image: url("http://placeimg.com/600/300/nature");
        }

        .imgslide li:nth-child(2) {
            background-image: url("http://placeimg.com/600/300/people");
        }

        .imgslide li:nth-child(3) {
            background-image: url("http://placeimg.com/600/300/tech");
        }

        .imgslide li:nth-child(4) {
            background-image: url("http://placeimg.com/600/300/arch");
        }

        .btns {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #FFF;
            color: #000;
            text-align: center;
            line-height: 50px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: block;
            z-index: 999;
        }

        .btns-left {
            left: 10px;
        }
        .btns-left::before {
            content: "<";
        }
        .btns-right {
            right: 10px;
        }
        .btns-right::before {
            content: ">";
        }

        .btns-right:focus + .imgslide {
            animation: 2s slide1 forwards;
        }

        label{
            width: 10px;
            height: 10px;
            background-color: #000
        }

        #s1:checked ~ .imgslide{left: 0}
        #s2:checked ~ .imgslide{left: -100%}
        #s3:checked ~ .imgslide{left: -200%}
        #s4:checked ~ .imgslide{left: -300%}
    </style>
</head>
<body>

    <section id="visual">
        <label for="s1">1</label>
        <input type="radio" name="btn" id="s1" checked>
        <label for="s2">1</label>
        <input type="radio" name="btn" id="s2">
        <label for="s3">1</label>
        <input type="radio" name="btn" id="s3">
        <label for="s4">1</label>
        <input type="radio" name="btn" id="s4">
        <ul class="imgslide">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>

</body>
</html>