Keyframes

We need to get keyframes to work, maybe something like this?

styled.div`
@keyframes {
  0% { color: transparent; }
  100% { color: awesome; }
}
`;

[geelen]

Hmm. How about:

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

const animationName = keyframes`
  0% { color: transparent; }
  100% { color: radboats; }
`

const Div = styled.div`
  animation: ${animationName} 0.3s 0s both;
`

[haikyuu]

Bonus point, you can use

function rotationBuilder(degree) {
  const rotation = keyframes`
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-${degree}deg);
    }
    50% {
      transform: rotate(0deg);
      opacity: .9
    }
    75% {
      transform: rotate(${degree}deg);
    }
  `;
  return rotation;
}

const StyledDiv = styled.div`
  animation: ${rotationBuilder(10)} 1s linear infinite;
`

Which is totally awesome.