React 内联 SVG 路径不响应 css 动画

Question

我上传了我的代码和 svgs 到这个github repo。

我有一些圆、斑点和三角形的 svg。我试图让圆圈摇晃，就像那个家伙在 this code pen when you hover on him, I am trying to make the blobs move like waves like in this code pen 中摇晃一样，我试图让三角形旋转。斑点和三角形根本没有响应，即使我在检查 html 时可以看到它们应用了样式。圆圈有一定效果，但不是我想要的

这是每个的代码

circles.scss

    .circles > circle {
        animation: shake 2.2s cubic-bezier(.36,.07,.19,.97) both;
    }
    
    @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }
      
      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }
    
      30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
      }
    
      40%, 60% {
        transform: translate3d(4px, 0, 0);
      }
    }

triangles.scss

    .triangles > g > path {
        animation: triangle-animation 2.2s cubic-bezier(.36,.07,.19,.97) both;
    }
    
    @keyframes triangle-animation {
      10%, 90% {
        tranform: rotate(5deg);
      }
      
      20%, 80% {
        tranform: rotate(90deg);
      }
    
      30%, 50%, 70% {
        tranform: rotate(180deg);
      }
    
      40%, 60% {
        tranform: rotate(30deg);
      }
      100% { 
          tranform: rotate(0deg);
      }
    }

waves.scss

    .waves > path {
      animation: wave-animation 4s infinite alternate;
    //   animation-duration: 4s;
    //   animation-iteration-count: infinite;
    //   animation-direction: alternate;
    }
    
    @keyframes wave-animation {
      0%   {
        margin-left:0px;
        margin-top:0px;
        }  
      50%  {
        margin-left:-2000px;
        margin-top:200px;
        }  
      100% {
        margin-left:0px; 
        margin-top:0px;
        }
    }

这是我的主要 App.js 文件

    import React from 'react';
    
    import Blobs from 'svg/Blobs.svg'
    import Circles from 'svg/Circles.svg';
    import Triangles from 'svg/Triangles.svg';
    
    export default () => (
        <div>
            <Circles className="circles" />
            <Blobs className=" w-100 h-100 waves" />
            <Triangles className='w-100 triangles' />                
        </div>
    );

样式导入到index.js

谢谢

Answer 1

使用内部的 svg 代码创建组件，然后添加 css 类 ... 我建议您从头开始创建自己的 svg，这比使用已经创建的 svg 更容易。

（查看页面底部的三角形、圆形和波浪形演示）

App.js

import React from 'react';
import './style.css';

import Triangles from './svg/Triangles';

export default function App() {
  return (
    <div>
      <Triangles />
    </div>
  );
}

Triangles.js

import React from 'react';

export default function Triangles() {
  return (
    <div className="triangles">
      <svg className="triangle one">
        <path d="M150 0 L30 200 L270 200 Z" />
      </svg>
      <svg className="triangle two">
        <path d="M120 0 L30 180 L200 200 Z" />
      </svg>
      <svg className="triangle three">
        <path d="M10 0 L40 280 L190 170 Z" />
      </svg>
    </div>
  );
}

style.css

/* Triangles */
.triangles {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50vh;
}
.triangle {
  position: absolute;
  fill: rgb(23, 233, 224);
  fill-opacity: 0.4;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.triangle.one {
  height: 210px;
  width: 300px;
  animation-duration: 5000ms;
}
.triangle.two {
  height: 150px;
  width: 400px;
  animation-duration: 9000ms;
}
.triangle.three {
  height: 120px;
  width: 300px;
  animation-duration: 3000ms;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

演示： Stackblitz

React 内联 SVG 路径不响应 css 动画

React inlined SVG paths are not responding to css animations

javascript

css

svg

css-animations

reactjs