javascript - Why don't styled-component animations repeat on every render?

Question

My code is for testing purposes. I have animation on a styled component. If a state variable changes for instance in the App component, the App will re-render.

As I know a styled-component inside the return function of the App component will re-render also and the animation will show again but that isn't the case.

Even if the App component re-renders the styled-component animation isn't showing again. Why is the Animation showed only on the first render of the App?

import React, { useEffect, useState } from "react";
import styled, { keyframes } from "styled-components";

const kf = keyframes`
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
`;

const Square = styled.div`
  width: 300px;
  height: 300px;
  background: #000;
  animation: ${kf} 3s;
`;

let App = () => {
  let [number, setNumber] = useState(0);

  useEffect(() => {
    window.setTimeout(() => {
      setNumber(5);
    }, 20000);
  }, []);

  return (
    <React.Fragment>
      <Square></Square>
    </React.Fragment>
  );
};

export default App;

codesandbox

Answer 1

等待大神答复