V4 中带有样式组件的关键帧动画

Question

我正在尝试简单地为 div 设置动画以更改背景 colors 以复制成功的 flash，但在样式组件关键帧和 css 助手方面存在问题。

下面是代码示例，我也尝试过在 animation 变量引用周围不使用 css ，但随后出现 V4 错误。

有什么建议可以渲染吗？ 我可以通过点击简单的 css 来做到这一点，但它绝对看起来不那么干净，我想知道将来如何使用动画。

谢谢！

 import React, { useState } from "react"; import styled, { keyframes, css } from "styled-components"; type LastUpdatedProps = { greenFlash?: boolean | undefined }; const fillGreen = keyframes` from { background-color: "none"; color: "none"; width: 100%; font-size: "1rem"; } 25%{ font-size: '1.2rem'; } 50% { background-color: "#007e00"; color: "#007e00"; width: 80%; font-size: "1.4rem"; } 75%{ font-size: '1.2rem'; } 100% { background-color: "none"; color: "none"; width: 100%; font-size: "1rem"; } `; const LastUpdated = styled.div <LastUpdatedProps>` color: ${({ theme }) => theme.fontColor}; margin-left: 0.4rem; border-radius: 20px; width: "100%"; font-size: "1rem"; animation: ${(props) => props.greenFlash? css` ${fillGreen} `: ""}; animation-duration: 3s; animation-fill-mode: linear; `; const Example: React.FC = ({}) => { const [greenFlash, setGreenFlash] = useState(false); return ( <div> <button onClick={() => setGreenFlash(;greenFlash)}> </button> </div> ); };