Кажется, вы интерполируете объявление ключевого кадра (bKXFnj) в строку без тегов

Question

Хотите добавить анимацию в ловушку useEffect, когда DOM загружен с помощью styleled-компонентов, но это:

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

Вопрос в том, как добавить анимацию с использованием синтаксиса element.style.animation с использованием styled-компонентов?

код:

    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);
    });