롤링 배너 애니메이션

import styled, { keyframes } from 'styled-components'

const test = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
const Rolling = () => {
    return (
        <div
            style={{
                marginTop: 30,
                overflow: 'hidden',
                display: 'flex',
                flexWrap: 'nowrap',
                width: '70%',
            }}
        >
            <RollingAnimation>
                {test.map((item, i) => (
                    <Item key={i}>{item}</Item>
                ))}
            </RollingAnimation>
            <RollingAnimation2>
                {test.map((item, i) => (
                    <Item key={i}>{item}</Item>
                ))}
            </RollingAnimation2>
        </div>
    )
}

export default Rolling

const infiniteAnimation1 = keyframes`
        0% {
        transform:translateX(0)
    }
    50% {
        transform:translateX(-100%)
    }
    50.1% {
        transform:translateX(100%)
    }
    100% {
        transform:translateX(0)
    }
`

const infiniteAnimation2 = keyframes`
    0% {
        transform:translateX(0%)
    }

    100% {
        transform:translateX(-200%)
    }
`
const Item = styled.div`
    width: 100px;
    height: 50px;
    background: gray;
    color: white;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    margin-right: 10px;
`
const RollingAnimation = styled.div`
    display: flex;
    animation: 10s linear infinite normal none running ${infiniteAnimation1};
`
const RollingAnimation2 = styled.div`
    display: flex;
    animation: 10s linear infinite ${infiniteAnimation2};
`