styled-componentsを使ってCSS Animationを実装する方法

#はじめに
styled-componentsはReactコンポーネント内で使えるCSS in JSの一種です。
スコープをコンポーネントのローカルに保てる点や、Sass記法で記述できる点などが特徴です。

通常のCSSであれば@keyframesを使ってアニメーションを記述できますが、styled-componentsではどうでしょうか。

##styled-componentsでのkeyframes
結論から言うと、ほぼpure CSSと同様の記述でkeyframesを実装できます。
（keyframesのimport文が必要になります）

animation.js

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

const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;
const FadeIn = styled.div`
  animation: ${fadeIn} .5s ease-in-out;
`;

// JSXで<FadeIn>コンポーネントを使うとkeyframes: fadeInが適用される

##参考
Basics - styled-components