It seems you are interpolating a keyframe declaration (bKXFnj) into an untagged string

Want to add animation in useEffect hook when DOM is loaded with styled-components but this :

Error: It seems you are interpolating a keyframe declaration (bKXFnj) into an untagged string. 
This was supported in styled-components v3, but is not longer supported in v4 as keyframes are 
now injected on-demand. Please wrap your string in the css\`\` helper which ensures the styles 
are injected correctly. See https://www.styled-components.com/docs/api#css

The question is How can I add animation using syntax element.style.animation using styled-components?

code:

    const showHeading = keyframes`
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
            }
    `;

    const animation = css`
        animation: ${showHeading} 0.7s ease-out 0.4s;
    `;


    const handleLoadAnimation = () => {
        let ypos = ref.current.getBoundingClientRect().top;
        if (ypos < window.innerHeight * 0.9) {
            ref.current.style.animation = `${animation}`;
        }
    };

    useEffect(() => {
        window.addEventListener('load', handleLoadAnimation);
        window.addEventListener('scroll', handleScrollAnimation);
        return () => window.removeEventListener('scroll', handleScrollAnimation);
    });