CSS 关键帧动画会重置动画之前设置的变换值

Question

正在制作一个将正方形旋转 45 度以形成菱形的动画。动画只是为了缩小钻石的大小，但是我注意到每次动画开始时，我设置的变换值

transform: rotate(45deg)

都会在动画运行之前重置，因此我必须在动画期间再次运行旋转函数。我可以运行缩放钻石的动画，而不重置初始变换值吗？我正在使用 Material UI 组件。

       <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          width: "10vh",
          height: "10vh",
          border: "1px solid",
          borderColor: "tertiary.main",
          transform: "rotate(45deg)",
          animation: "expand 500ms linear forwards",
          animationDelay: "2s",
          "@keyframes expand": {
            "0%": {
              transform: "scale(1)",
            },
            "100%": {
              transform: "rotate(45deg) scale(12)",
            },
          },
        }}
      >
      
      </Box>

Answer 1

因此，在 css 动画中，每个关键帧都会设置完整的变换 - 这意味着之前的任何变换都会被重置。只需在第一个和最后一个关键帧中包含

rotate(45deg)

即可：

"@keyframes expand": {
  "0%": {
    transform: "rotate(45deg) scale(1)",
  },
  "100%": {
    transform: "rotate(45deg) scale(12)",
  },
},