---
# System prepended metadata

title: Untitled

---

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

![gif](https://i.imgur.com/s1kvCPh.gif)

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


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

```htmlmixed=
<div class=“stage”>
</div>
```
```css
.stage {
  width: 500px;
  height: 260px;
  overflow: hidden;
  
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    animation: slideIn 2s ease-in-out 0s;
    animation-fill-mode: both;
    background-color:#000;
  }
}
@keyframes slideIn {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
```
