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


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

## 下記のような形式でコーディングをしてください

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

const Wrapper = styled.div`
    width: 200px;
    height: 30px;
    overflow: hidden; 
`

const Container = styled.div`
    animation: ${slideIn} 0.4s ease-in-out 0s both;
    background: red;
    width: 100%;
    height: 100%;
`

const slideIn = keyframes`
  from {
      transform: translateX(-100%)
  }
  to {
      transform: translateX(100%)
  }
`

export const Result = () => (
    <Wrapper>
        <Container />
    </Wrapper>
)