How can I use animation in styled-components css``?

Question

I read documents, and I used keyframes`` for declare css animation. But I got error message like this:

Please wrap your string in the css`` helper which ensures the styles are injected correctly.

So, I wrapped animation with css`` instead keyframes``, but animation didn't work.

const rippleAnimation = css`
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
      transform: translate(-50%, -50%) scale(var(--material-scale));
      opacity: 0;
  }
`;

This didn't work well.

I don't know I wrote perfectly...

ordinary code(error about keyframes) :

const rippleAnimation = keyframes`
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
      transform: translate(-50%, -50%) scale(var(--material-scale));
      opacity: 0;
  }
`;

Answer 1

You can do it like this. Create keyframes in CSS. And add the keyframes with js. You can also add this keyframe after clicking in js.

const hello = document.querySelector(".hello")
hello.style.animation = "5s colorChange linear infinite"

.hello {
  color: #000000;
}

@keyframes colorChange {
  0% {
    color: black;
  }
  50% {
    color: red;
  }
  100% {
    color: black;
  }
}

<h1 class="hello">Hello World</h1>