animation.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css" id="style">
        #root {
            width: 52px;
            height: 52px;
            overflow: hidden;
            white-space: nowrap;
        }
        #root div {
            vertical-align: top;
            width: 50px;
            line-height: 50px;
            height: 50px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            border: 1px solid;
            display: inline-block;
        }
        #root div:first-child {
            animation-name: slide;
            animation-fill-mode: none;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-duration: 1s;
        }

        @keyframes slide {}
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="application/javascript">
        main();

        function main() {
            const root = document.getElementById('root');
            const style = document.getElementById('style');
            const fps = getFpsFromQuery() || 30;

            injectFrames(root, fps);
            injectKeyFrames(style, fps);
        }

        function getFpsFromQuery() {
            const params = new URLSearchParams(location.search);
            const fps = params.get('fps');
            return fps ? parseInt(fps, 10) : undefined;
        }

        function injectFrames(container, frames) {
            let current = frames;
            while(current--) {
                container.appendChild(createFrameElement(frames - current));
            }
        }

        function createFrameElement(number) {
            const el = document.createElement('div');
            el.innerHTML = number;
            return el;
        }

        function injectKeyFrames(style, fps) {
            style.innerHTML = style.innerHTML.replace('@keyframes slide {}', `@keyframes slide {${generateKeyFramesContent(fps)}`);
        }

        function generateKeyFramesContent(fps) {
            const step = (100 / fps).toFixed(5) * 1;
            let content = '';
            for (let i = 0; i < fps; i++) {
                content += createKeyFrame(
                    i * step + (i === 0 ? 0 : 0.00001),
                    i * -52,
                    i > 0
                );
                content += createKeyFrame(
                    i + 1 === fps ? 100 : (i + 1) * step,
                    i * -52,
                    true
                );
            }
            return content;
        }

        function createKeyFrame(percent, marginValue, gap) {
            let content = '';

            content += (gap ? ' ' : '') + percent + '% {';
            content += 'margin-left: ' + marginValue + 'px';
            content += '}';

            return content;
        }
    </script>
</body>
</html>