title: How to pass props to keyframes in styled-component with react?
body: <p>I have following code and I want to pass value of <code>y</code> from react component to <code>moveVertically</code> keyframe. Is it possible to do so ?</p>
  
  <pre><code>import React from 'react';
      import styled, {keyframes} from 'styled-components';
  
  
      const moveVertically = keyframes`
          0% {
              transform : translateY(0px) 
          }
          100% {
              transform : translateY(-1000px) //I need y here
          }
      `;
  
      //I can access y in here via props but can't send it above
      const BallAnimation = styled.g`
          animation : ${moveVertically} ${props =&gt; props.time}s linear
      `;
  
  
      export default function CannonBall(props) {
  
          const cannonBallStyle = {
              fill: '#777',
              stroke: '#444',
              strokeWidth: '2px',
          };
  
          return (
              &lt;BallAnimation time = {4} y = {-1000}&gt;
                  &lt;circle cx = {0} cy = {0} r="25" style = {cannonBallStyle}/&gt;
              &lt;/BallAnimation&gt;
          );
      }
  </code></pre>