React项目中styled-components实现的浮动方块动画不生效如何解决

• 核心问题是动画名称拼写不一致：你在animation属性中引用的动画名是square，但@keyframes定义的动画名是拼写错误的sqaure（字母a、u顺序颠倒），二者无法匹配导致动画不生效。
• 次要显示问题：初始top: -60px; left: -60px;会让方块初始位置在视口外，默认状态下不可见。

修复后的完整代码如下：

import React from 'react';
import styled from 'styled-components';

// 组件名也存在相同拼写错误，修正为Square也可，不修正也不影响运行
const Sqaure = styled.div`
  width: 60px;
   height: 60px;
  background-color: #4e6bff;
  opacity: 0.7;
  position: absolute;
  // 调整为0即可默认在左上角可见
  top: 0;
  left: 0;
  z-index: -1;
  // 和@keyframes的动画名保持一致即可，建议统一用正确拼写square
  animation: square 25s linear alternate infinite;

  @keyframes square {
      to{
         transform: translate(100vw, 100vh);
      }
  }
`;
const AnimatedShapes = () => {
    return <Sqaure/>;
}

export default AnimatedShapes;

内容的提问来源于stack exchange，提问作者user14367514