Creating keyframes using styled objects

Hello, thank you for maintaining Styled Components.

I would like to echo the sentiment shared in this Spectrum thread: creating custom animations using styled objects. This is something I would like to use in styled-components.

Here is an example using styled objects with keyframes, but requiring an interpolated string when consuming the animation: https://codesandbox.io/s/animation-objects-b6h6h

const animation = keyframes({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
})

// Keyframes must be consumed as an interpolated string 
const Component = styled.div`
  animation: ${animation} 3s;
`

Please let me know if there’s anything I can do to assist.

[pvarga-dni]

By the way, this is how a template string (for the animation) and a style object for the rest can be used together: (forked from the example above): https://codesandbox.io/s/animation-objects-forked-cwwn4

[Grsmto]

Am I missing something or you simply can’t use keyframes in object style at all? https://codesandbox.io/s/animation-objects-forked-6ryu1