How to pass props to keyframes in styled-component with react? : <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>
