## このアニメーションをCSSアニメーションを使って再現してください。

↓ リンクを開いていただいて、css-animation.gifをご覧ください。
https://drive.google.com/open?id=1iBKN0vb0-n6gL9np1dBTFzW6EK4omJrs

- お好きなCSSプリプロセッサを使ってください（例: sass, stylus, styled-components）
- ページ表示時に一回アニメーションが走るだけで良い。無限ループする必要はない（見本は確認しやすくするためにループしている）
- 要素のサイズ、色、イージングは自由で良い
- 要素の中にテキストなどが入ることを考慮しなくても良い
- hoverなどのユーザアクションは考慮しないので、基本的にはtransitionではなくanimationを使う
- パフォーマンスやブラウザ対応も気にするとなお良し
- 余力がある場合は、違った実装でアニメーションを複数個作れるとなお良し

import React from 'react';
import styled, {keyframe} from 'styled-components';


const Wrapper = styled.div<{width: number}>`
    width: ${({width}) => width}px;
    height: 40px;
    overflow: hidden;
`;

const toRight = keyframe`
    from {
        transfrom: transition(-100%, 0px);
    }
    
    to {
        transfrom: transition(100%, 0px);
    }
`;

const AnimationMain = styled.div<{width: number}>`
    width: 100%;
    height: 100%;
    animation: ${toRight} 300ms linear 300ms both;
`;

const AnimationTest: React.FC = () => {
    const width = 200;

    <Wrapper width = {width}>
        <AnimationMain width={width} />
    </Wrapper>
}