[CSS]动画，平移到某个位置，停住-JZTXT

animation-fill-mode: forwards;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .move_in {
            animation-duration: 1s;
            animation-fill-mode: forwards;   /* 动画播放一次定格到结尾 */
            animation-name: slidein;
        }

        @keyframes slidein {
            from {
                transform: translate(-500px, 0);
            }

            to {
                transform: translate(0, 0);
            }
        }

        .move_out {
            animation-duration: 1s;
            animation-fill-mode: forwards;   /* 动画播放一次定格到结尾 */
            animation-name: slideout;
        }

        @keyframes slideout {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(-500px, 0);
            }
        }

        #left {
            width: 500px;
            height: 300px;
            background-color: aquamarine;
            position: relative;
            left: 500px;
        }
    </style>
</head>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<body>
    <div id="left" class="move_in">

    </div>
</body>

<script>
    $('#left').on('click', function () {
        if ($("#left").hasClass("move_out")) {
            return $('#left').removeClass('move_out').addClass('move_in')
        }

        if ($("#left").hasClass("move_in")) {
            return $('#left').removeClass('move_in').addClass('move_out')
        }
    })
</script>

</html>