Animated SVG get very slow on browser error-CodePudding

I'm a newbie to SVG animations

I'm trying to make my SVG logo have some animation The weird behavior is that the animation works fine in codepen but when I try to implement it in react, it doesn't

It gets slowed down in weird behavior, Even though I inspect the element on the browser and hover on the HTML it seems to work fine!

here is the HTML code on codepen

and here is the react code

import styles from "./SplashScreen.module.scss";

const SplashScreen: React.VFC = () => {
  return (
    <main className={styles.container}>
      <AnimatedLogo />
    </main>
  );
};

const AnimatedLogo: React.VFC = () => {
  return (
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      x="0px"
      y="0px"
      width="400"
      height="400"
      viewBox="0 0 400 400"
    >
      <mask className={styles.grayscaleMask}>
        <g>
          <path d="m -509.9,160.405 0,67.59962 c 70.8,0 106.9,14.70038 141.7,29.00038 34.9,14.3 71,29 142.10001,29 71,0 107.2,-14.8 142.100004,-29 34.8,-14.2 70.9,-29 141.700016,-29 70.8,0 106.9,14.7 141.7,29 34.9,14.3 71,29 142.1,29 71.09999,0 107.19999,-14.8 142.09999,-29 34.8,-14.2 70.9,-29 141.7,-29 70.8,0 106.9,14.7 141.7,29 34.9,14.3 71,29 142.1,29 l 0,-632.20001 -1419.00002,0 z" />
        </g>
      </mask>
      <mask id="colorMask" className={styles.colorMask}>
        <g>
          <path d="m 909.1,353.4 0,-67.6 c -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71.1,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 l 0,632.2 1419,0 z" />
        </g>
      </mask>

      <g>
        <Logo color="#FFFFFE" />
      </g>

      <g mask={`url(#colorMask)`}>
        <Logo color="#93281B" />
      </g>
    </svg>
  );
};

interface LogoProps {
  color: string;
}

const Logo: React.FC<LogoProps> = ({ color }) => {
  return (
    <>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M66.1842 79.7503C66.3576 79.965 66.4974 80.2169 66.6428 80.4652C66.1152 80.7377 65.6045 81.0587 65.1179 81.4749C64.3276 82.145 63.6322 82.9288 63.0637 83.8042C62.5119 84.6534 62.0533 85.5866 61.6973 86.5814C61.3431 87.5725 61.166 88.5822 61.1716 89.5882C61.1828 91.6749 61.6525 93.4275 62.5697 94.7937C63.4924 96.1692 64.7656 97.1641 66.3557 97.7464C67.888 98.3194 69.7037 98.5489 71.7524 98.4295C73.7582 98.3044 75.9131 97.8752 78.1556 97.1566C83.2335 95.5197 87.8621 93.224 91.9147 90.3292C95.9561 87.4419 99.6713 83.989 102.965 80.0676C106.246 76.1519 109.227 71.7453 111.824 66.9691C114.409 62.206 116.795 57.0621 118.926 51.67C120.719 47.1962 122.494 43.1871 124.203 39.7492C125.931 36.287 127.749 33.1738 129.605 30.5011C131.468 27.8302 133.544 25.5364 135.539 23.4591C139.905 18.9162 149.13 16.6242 149.13 16.6242L137.043 43.385L120.029 80.9747L133.101 76.3087C133.817 74.53 134.702 72.5403 135.763 70.3492L139.923 62.2918L144.675 54.0908C146.334 51.3901 147.976 48.9133 149.553 46.7408C151.127 44.5608 152.646 42.7131 154.068 41.2442C155.429 39.8406 156.589 38.9765 157.517 38.6779C157.728 38.6051 158.121 38.5099 158.315 38.6517C158.507 38.7954 158.619 39.2173 158.621 39.822C158.637 40.996 158.141 42.5171 157.159 44.3424L153.723 50.5427C152.478 52.7563 151.298 55.1042 150.223 57.5213C149.136 59.9737 148.588 62.4449 148.603 64.8619C148.61 65.9705 148.767 67.0307 149.071 68.0087C149.378 69.0147 149.855 69.8602 150.486 70.5209C151.138 71.2021 151.956 71.6538 152.922 71.8647C153.861 72.0831 154.931 72.0047 156.1 71.6239C157.908 71.0453 159.726 70.0058 161.497 68.5443C163.247 67.1072 164.955 65.3696 166.577 63.3744C167.164 62.6539 169.397 59.3653 169.088 58.5888C169.088 58.5888 169.054 58.3257 168.959 58.2604C168.715 58.1446 168.588 58.1988 168.588 58.1988C168.169 58.1446 167.893 58.475 167.488 59.0293C166.03 61.0096 164.569 62.7584 163.137 64.231C161.773 65.6421 160.557 66.5211 159.523 66.8571C159.157 66.9728 158.906 66.9653 158.772 66.8347C158.598 66.6555 158.498 66.2916 158.492 65.7746C158.484 64.5241 159.042 62.8107 160.142 60.6848C160.142 60.6811 163.961 53.5756 163.961 53.5756C165.376 51.028 166.674 48.4112 167.813 45.8001C168.989 43.0994 169.578 40.5741 169.563 38.284C169.55 35.5105 168.717 33.7318 167.099 32.9946C165.57 32.3022 163.775 32.276 161.762 32.9218C159.415 33.6796 157.053 35.1634 154.739 37.3322C152.476 39.4506 150.29 41.9086 148.239 44.628C146.8 46.5336 145.521 48.568 144.224 50.5875C147.259 44.3835 150.273 38.1049 153.228 31.7198L167.652 0L146.998 5.89229L140.85 7.60194L133.574 9.6494L126.237 11.8592C117.392 14.7055 109.18 18.1174 101.826 22.0032C94.4593 25.8891 88.0541 30.0886 82.7842 34.4821C77.505 38.8888 73.3275 43.5194 70.3785 48.2395C68.7269 50.8899 67.9775 53.193 68.479 54.1094C68.63 54.3931 68.8984 54.5611 69.206 54.5648C69.7577 54.5723 70.3058 54.0796 70.9266 53.0157C72.567 50.2161 74.7443 47.5658 77.3988 45.1413C80.0552 42.7019 83.0937 40.4416 86.4249 38.4184C89.7598 36.3952 93.1022 34.5587 96.3569 32.9554C99.5968 31.3615 102.699 30.0102 105.575 28.9258L112.519 26.4584C112.536 26.4547 121.73 23.4516 121.73 23.4516C121.731 23.4516 128.78 21.5086 128.78 21.5086L134.262 20.1238C134.262 20.1238 134.955 19.9446 135.789 19.7299C133.632 21.126 131.464 22.5184 129.443 24.0302C126.602 26.156 123.864 28.5469 121.312 31.1431C118.758 33.7486 116.346 36.636 114.148 39.7305C111.939 42.8381 109.904 46.347 108.099 50.1601C108.099 50.1638 103.843 59.6826 103.843 59.6826L99.6769 69.0501C98.2714 72.1092 96.7894 75.0582 95.2757 77.8261C93.7621 80.5846 92.1011 83.1472 90.3339 85.4373C88.5929 87.7013 86.6765 89.6685 84.6372 91.2904C82.609 92.9067 80.3292 94.1274 77.8574 94.9187C75.8441 95.5683 74.103 95.6299 72.677 95.0979C71.9705 94.831 71.4355 94.2991 71.0272 93.5544C71.9295 93.0299 72.8112 92.4569 73.6333 91.813C75.0947 90.6708 76.3232 89.3008 77.2869 87.733C78.2768 86.1372 78.7671 84.2708 78.754 82.1898C78.7428 80.1554 78.2954 78.5222 77.4174 77.3483C76.5469 76.1817 75.4005 75.3568 74.0061 74.8902C72.6546 74.446 71.1409 74.2855 69.5024 74.4198C67.8955 74.5561 66.2905 74.8827 64.7302 75.3866C60.1892 76.8481 56.2745 78.9963 53.0925 81.781C49.9216 84.5545 47.2857 87.8021 45.2613 91.4416C43.248 95.0531 41.7567 99.0529 40.8284 103.333C39.9131 107.579 39.4583 111.976 39.4806 116.394L39.2719 124.186C39.1227 126.863 38.8096 129.604 38.3473 132.327C37.8849 134.998 37.2176 137.656 36.3676 140.222C35.5212 142.764 34.3841 145.159 32.9804 147.335C31.5842 149.504 29.845 151.451 27.8112 153.123C25.7942 154.794 23.3131 156.143 20.4405 157.127C18.4384 157.834 16.6712 158.093 15.1836 157.899C13.7017 157.713 12.4602 157.257 11.4908 156.539C10.5233 155.829 9.77955 154.92 9.2781 153.853C8.77292 152.785 8.51194 151.688 8.50262 150.594L8.53618 149.034C8.53618 149.034 8.72073 147.845 8.77665 147.5C10.309 146.811 11.543 145.786 12.3893 144.371C13.2804 142.88 13.7315 141.225 13.7315 139.457C13.7315 139.45 13.7315 139.442 13.7315 139.435C13.7184 137.568 13.0902 136.191 11.873 135.331C10.6613 134.478 9.15134 134.332 7.38415 134.905C6.04944 135.334 4.88436 136.064 3.92247 137.07C2.9755 138.061 2.20375 139.198 1.62773 140.441C1.04426 141.699 0.621107 143.018 0.36945 144.368C0.117793 145.728 -0.00523911 147.026 0.000353261 148.216C0.0189945 151.111 0.63602 153.504 1.84024 155.325C3.04447 157.153 4.6588 158.519 6.63291 159.379C8.5716 160.229 10.8365 160.641 13.3568 160.596C15.8435 160.553 18.4757 160.094 21.1805 159.223C26.1 157.64 30.5086 155.443 34.2946 152.698C38.0919 149.941 41.3243 146.65 43.9079 142.91C46.4953 139.17 48.4769 134.933 49.7967 130.327C51.1146 125.715 51.7671 120.701 51.7373 115.423C51.713 110.86 51.8435 106.442 52.1306 102.297C52.4102 98.2167 52.9452 94.4988 53.7151 91.2475C54.4757 88.0316 55.5252 85.3272 56.8282 83.1995C58.0995 81.1352 59.7586 79.7653 61.7607 79.1195C63.8447 78.4457 65.2913 78.6529 66.1842 79.7503Z"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M79.0518 131.777C79.0593 132.84 79.2189 133.845 79.5287 134.755C79.8423 135.706 80.3267 136.507 80.9689 137.136C81.6411 137.785 82.5048 138.199 83.5357 138.352C84.5384 138.506 85.7251 138.367 87.0601 137.939C88.8326 137.377 90.639 136.327 92.4341 134.82C93.4536 133.965 95.3745 131.67 95.2168 130.899L95.1417 130.543L94.7736 130.416C94.3437 130.289 94 130.631 93.7484 130.884C92.543 132.088 91.4896 132.84 90.6165 133.121C90.2315 133.246 89.9424 133.246 89.764 133.124C89.6682 133.063 89.5086 132.748 89.503 131.973C89.4992 130.994 89.7978 129.604 90.3949 127.835L92.7814 121.817L96.0861 114.886L99.6406 107.951L102.788 101.868L105.61 96.1255L104.217 96.6215L91.5384 101.063L91.4389 101.312C89.1387 106.905 86.7766 112.06 84.4145 116.631C82.073 121.171 79.8066 125.17 77.683 128.511C75.5987 131.794 73.6403 134.448 71.8621 136.408C70.1497 138.287 68.7583 139.406 67.7256 139.737C67.0853 139.943 66.783 139.782 66.6178 139.644C66.3323 139.402 66.1859 138.97 66.1821 138.352C66.1784 137.654 66.3098 136.806 66.5764 135.816C66.8487 134.796 67.4364 133.257 68.3264 131.234L72.1381 123.137L78.6875 110.1C78.6913 110.096 82.3265 102.789 82.3265 102.789L68.349 107.684L66.5051 111.483L64.0003 116.578L61.1518 122.568L58.4667 128.756L56.5045 134.416C55.99 136.196 55.7309 137.757 55.7384 139.054C55.7497 141.559 56.3938 143.472 57.6556 144.739C58.9699 146.055 60.9697 146.296 63.589 145.459C65.1888 144.948 66.7755 144.082 68.3095 142.886C69.8192 141.701 71.3101 140.286 72.7428 138.67C74.1998 137.025 75.5893 135.249 76.8737 133.396C76.8737 133.396 78.1298 131.513 79.2565 129.83C79.1795 130.536 79.0518 131.777 79.0518 131.777"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M209.667 77.8818C210.555 75.5955 211.61 73.2685 212.798 70.9748C213.985 68.6977 215.301 66.6245 216.713 64.8125C218.065 63.0709 219.327 62.0037 220.456 61.6425C220.861 61.5109 221.402 61.4035 221.697 61.6128C221.936 61.7907 222.07 62.2353 222.07 62.8912C222.07 62.919 222.07 62.9449 222.07 62.9746C222.07 64.3419 221.751 65.9056 221.116 67.6194C220.464 69.3796 219.481 71.1767 218.193 72.9609C216.904 74.7562 215.301 76.5367 213.441 78.2524C211.936 79.6419 210.198 80.8759 208.349 82.0005C208.638 80.8314 209.038 79.5067 209.667 77.8818ZM224.167 86.9511C223.756 86.8343 223.311 87.0159 222.018 88.3295C219.06 91.3439 216.267 93.2838 213.712 94.1045C212.516 94.4843 211.526 94.5862 210.763 94.401C210.011 94.225 209.4 93.8692 208.947 93.3412C208.469 92.7946 208.124 92.0609 207.916 91.1587C207.695 90.2193 207.58 89.2022 207.571 88.1313L207.645 86.3248C207.645 86.3211 207.777 85.228 207.84 84.7185C208.323 84.4387 213.862 81.2409 213.862 81.2409C216.523 79.6809 219.212 77.8818 221.842 75.8994C224.506 73.891 226.831 71.7492 228.75 69.5315C230.746 67.2248 231.756 64.9126 231.756 62.6485C231.756 62.63 231.756 62.6152 231.756 62.5966C231.738 59.547 230.046 58.5335 228.633 58.2186C226.779 57.8091 224.417 58.0555 221.615 58.9578C218.848 59.8434 215.897 61.4535 212.843 63.7379C209.81 66.0057 206.965 68.6737 204.38 71.6621C201.803 74.6469 199.638 77.9189 197.937 81.3854C196.221 84.8815 195.359 88.3369 195.38 91.6552C195.404 95.596 196.542 98.3103 198.754 99.7239C200.949 101.125 204.119 101.176 208.178 99.8759C212.752 98.4085 216.952 95.9943 220.662 92.6946C222.399 91.1531 224.863 88.4166 224.638 87.4494L224.558 87.1067L224.167 86.9511V86.9511Z"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M186.468 62.9492C182.41 64.2518 179.238 64.198 177.045 62.7936C174.829 61.3799 173.695 58.6655 173.671 54.7282C173.652 51.4135 174.512 47.9561 176.222 44.4579C177.925 41.0023 180.092 37.7302 182.67 34.7379C185.253 31.7437 188.098 29.0775 191.134 26.8077C194.193 24.5213 197.144 22.9112 199.907 22.0274C202.709 21.1306 205.07 20.8842 206.923 21.29C208.336 21.605 210.026 22.6185 210.047 25.6719V25.7183C210.047 27.9806 209.037 30.2929 207.042 32.6016C205.124 34.825 202.799 36.9669 200.136 38.9716C197.525 40.9394 194.841 42.7385 192.158 44.3134C192.158 44.3134 186.612 47.5077 186.13 47.7912C186.066 48.3044 185.936 49.3939 185.936 49.3939L185.864 51.2022C185.871 52.2732 185.987 53.2941 186.208 54.2316C186.416 55.1321 186.761 55.864 187.242 56.4143C187.695 56.946 188.291 57.2925 189.056 57.4741C189.825 57.6557 190.815 57.5575 192.005 57.1739C194.559 56.3605 197.35 54.4169 200.312 51.406C201.605 50.0887 201.894 49.8997 202.457 50.0238C202.938 50.1276 202.929 50.5185 202.929 50.5185C203.153 51.4894 200.691 54.2242 198.958 55.7658L198.955 55.7695C195.25 59.0675 191.047 61.4799 186.468 62.9492ZM191.094 34.0468C189.911 36.3221 188.856 38.6492 187.957 40.9542C187.329 42.5754 186.934 43.9002 186.644 45.0767C188.488 43.9502 190.221 42.7162 191.736 41.3229C193.593 39.609 195.192 37.8321 196.488 36.033C197.783 34.2376 198.761 32.4422 199.408 30.6913C200.043 28.9719 200.364 27.4062 200.364 26.0295V25.9647C200.362 25.3069 200.232 24.8623 199.989 24.6881C199.694 24.475 199.153 24.5825 198.745 24.7122C197.627 25.0716 196.366 26.1389 195.005 27.8787C193.586 29.7074 192.269 31.7808 191.094 34.0468Z"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M86.564 199.232C86.411 199.459 86.2617 199.7 86.105 199.922C84.0136 202.928 81.9631 205.561 80.0079 207.752C78.1104 209.877 76.5432 211.151 75.3491 211.534C75.0712 211.626 74.8491 211.601 74.6327 211.45C74.4368 211.319 74.3342 211.012 74.3342 210.552C74.3267 208.95 74.9182 206.557 76.0898 203.446C77.3007 200.223 79.1925 195.779 81.7113 190.244L91.5268 169.2L97.3964 156.497L83.8307 161.492L82.6143 164.15L75.2018 180.195L69.8901 191.995C69.8882 191.995 66.4422 200.477 66.4422 200.477C65.5784 202.814 64.9384 204.856 64.5354 206.54C64.1399 208.234 63.9459 209.797 63.9533 211.184C63.9683 213.349 64.653 214.97 65.9963 216C67.3527 217.038 69.3415 217.146 71.9032 216.318C73.8939 215.679 75.9257 214.463 77.9369 212.702C79.8922 210.986 81.8251 208.954 83.6833 206.66C84.5117 205.637 85.3177 204.579 86.1106 203.504C86.0994 203.286 86.064 203.085 86.064 202.856C86.0565 201.81 86.2282 200.614 86.564 199.232"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M135.307 179.481C135.368 179.218 135.453 178.929 135.534 178.637L132.049 184.032L127.647 190.122C126.224 191.94 124.864 193.508 123.607 194.77C122.398 195.975 121.338 196.729 120.471 197.01C120.092 197.13 119.807 197.13 119.623 197.01C119.527 196.945 119.364 196.634 119.362 195.867C119.356 194.882 119.657 193.486 120.25 191.728L122.64 185.711L125.935 178.772L129.493 171.834L132.642 165.754L135.457 160.014L134.064 160.512L121.396 164.949L121.293 165.202C118.987 170.814 116.628 175.968 114.28 180.518C111.95 185.037 109.679 189.037 107.548 192.404C105.452 195.702 103.494 198.356 101.738 200.293C100.025 202.172 98.6305 203.294 97.5966 203.623C96.9567 203.829 96.6546 203.668 96.4857 203.524C96.2042 203.29 96.0579 202.852 96.056 202.238C96.0541 201.551 96.1855 200.699 96.4463 199.704C96.7203 198.691 97.3076 197.145 98.1971 195.12L102.012 187.023L108.552 173.99C108.555 173.982 112.183 166.675 112.183 166.675L98.2233 171.57L96.3825 175.367L93.8755 180.46L91.0326 186.452L88.3455 192.645L86.3846 198.296C86.2832 198.655 86.1988 198.985 86.1181 199.32C88.064 196.509 89.9762 193.547 91.8001 190.482C93.7742 187.154 95.4236 184.15 96.7034 181.542L96.9117 181.119L98.0638 181.378L98.8201 181.553C98.8201 181.553 96.5157 186.029 96.5157 186.033L93.1024 192.217L88.535 199.522C87.6137 200.915 86.6491 202.27 85.6621 203.597C85.7766 205.77 86.3883 207.477 87.5348 208.624C88.8521 209.944 90.8487 210.185 93.4664 209.345C95.0671 208.832 96.6508 207.965 98.1802 206.771C99.6682 205.609 101.162 204.194 102.614 202.56C104.054 200.933 105.442 199.159 106.741 197.283C106.741 197.283 108.036 195.342 109.12 193.712C109.051 194.422 108.917 195.661 108.917 195.661C108.925 196.703 109.079 197.705 109.387 198.637C109.709 199.595 110.197 200.396 110.835 201.021C111.496 201.667 112.357 202.077 113.397 202.238C114.395 202.395 115.585 202.26 116.923 201.824C118.692 201.261 120.503 200.213 122.295 198.71C124.04 197.252 125.795 195.496 127.521 193.501C129.232 191.515 130.921 189.319 132.544 186.965C132.544 186.965 133.668 185.246 134.804 183.509C134.804 183.429 134.792 183.356 134.792 183.272C134.785 182.194 134.961 180.921 135.307 179.481"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M93.567 192.111L96.9035 185.983C96.9035 185.979 99.156 181.545 99.156 181.545L98.4168 181.37L97.2905 181.114L97.0869 181.533C95.836 184.117 94.2236 187.094 92.294 190.391C90.5111 193.429 88.642 196.363 86.7399 199.149C86.4097 200.52 86.2409 201.707 86.2483 202.744C86.2483 202.972 86.2831 203.17 86.2941 203.387C87.259 202.072 88.2018 200.729 89.1024 199.35L93.567 192.111"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M170.359 147.605C168.413 148.23 166.907 149.482 165.88 151.318C164.893 153.092 164.387 154.845 164.387 156.524C164.387 156.55 164.387 156.576 164.387 156.597L164.573 158.393C164.573 158.397 164.801 159.367 164.874 159.69C164.383 162.207 163.555 165.076 162.389 168.23C161.197 171.456 159.77 174.607 158.146 177.599C156.525 180.6 154.706 183.275 152.745 185.559C150.829 187.783 148.862 189.234 146.881 189.879C146.075 190.143 145.463 190.143 145.073 189.879C144.66 189.598 144.411 188.98 144.333 188.035C144.281 187.176 144.385 186.113 144.647 184.892C144.905 183.644 145.471 181.928 146.326 179.77L149.842 171.482L155.639 158.858L164.162 140.677L169.135 130.308L171.533 125.432L157.488 131.029L155.652 134.619L152.747 140.514L145.558 155.69L140.473 166.604L137.185 174.212C136.521 175.902 136.019 177.369 135.671 178.611L136.418 177.442L140.079 171.329L143.085 166.093L144.381 166.934L144.865 167.256L141.286 173.23L137.272 179.898C137.272 179.898 136.102 181.705 134.947 183.487C135.016 187.34 136.169 190.059 138.392 191.559C140.65 193.092 143.713 193.245 147.495 192.02C150.582 191.023 153.673 189.455 156.683 187.344C159.668 185.25 162.463 182.749 164.991 179.894C167.508 177.05 169.749 173.89 171.65 170.488C173.545 167.08 174.962 163.56 175.855 160.016C175.861 159.982 176.489 155.939 176.489 155.939L176.605 153.701C176.586 151.128 176.026 149.368 174.901 148.32C173.735 147.245 172.204 147.003 170.359 147.605"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M141.327 173.09L144.922 167.051L144.436 166.725L143.133 165.875L140.114 171.168L136.437 177.347L135.686 178.529C135.605 178.824 135.521 179.116 135.459 179.383C135.116 180.839 134.94 182.127 134.947 183.218C134.947 183.303 134.959 183.377 134.959 183.458C136.119 181.657 137.294 179.83 137.294 179.83L141.327 173.09"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M61.961 172.354L75.4682 167.446C77.8788 161.511 82.831 138.533 55.6519 152.988C35.8001 163.548 22.1619 185.496 14.975 201.07C7.73789 216.208 11.1888 224.923 12.8784 227.928C15.5658 232.709 24.2053 234.24 36.3538 227.928C40.5365 225.755 34.6737 223.448 32.828 224.529C24.2053 229.578 23.4557 224.618 24.2053 220.379C28.3792 195.97 43.4726 167.136 54.4822 158.303C71.9665 144.274 61.961 172.354 61.961 172.354Z"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M49.6791 200.848C49.6791 200.848 46.0004 216.852 32.886 224.229C33.0626 224.418 33.2392 224.604 33.4121 224.793C33.4864 224.75 33.5552 224.703 33.6333 224.651L33.4474 224.834C34.3304 225.778 30.9305 228.841 31.8395 229.763C57.153 219.382 63.9534 195.768 63.9534 195.768L49.6791 200.848Z"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M33.8422 224.694C33.7683 224.744 33.7032 224.788 33.6328 224.828C33.6433 224.842 33.6539 224.853 33.6662 224.867L33.8422 224.694"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M86.248 156.496L99.504 151.529C99.504 151.529 113.634 121.8 120.999 107.086C128.657 91.7816 132.405 92.4306 132.963 92.3726C134.277 92.2454 137.617 91.6787 134.013 103.014C128.35 120.854 115.061 127.665 113.481 128.612C111.897 129.562 113.206 129.451 113.206 129.451C133.495 123.596 141.086 112.719 145.504 102.075C149.531 92.3726 146.266 84.4934 139.708 84.4934C133.148 84.4934 125.275 95.767 125.275 95.767L132.529 80.8857L126.08 83.1824L118.848 85.9372L86.248 156.496Z"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M126.146 83.2303L132.51 81.0688L132.6 80.8857L126.146 83.2303"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M184.319 73.5437C177.778 73.5437 169.928 84.7863 169.928 84.7863L177.253 69.7495L163.518 74.9782L124.385 159.427L137.603 154.471C137.603 154.471 158.319 110.749 165.661 96.0737C173.299 80.8112 177.037 81.4566 177.595 81.4025C178.907 81.2663 182.232 80.7049 178.642 92.0146C172.99 109.808 159.743 116.604 158.166 117.546C156.586 118.49 157.887 118.385 157.887 118.385C178.123 112.545 185.693 101.694 190.098 91.0745C194.116 81.4025 190.86 73.5437 184.319 73.5437"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M251.316 58.6032L256.801 47.8282L242.948 52.6274L225.303 92.6086L238.374 87.5473C238.374 87.5473 239.289 85.3392 241.117 81.3169C242.948 77.2909 252.62 58.8597 256.801 55.3542C256.801 55.3542 255.233 64.3132 263.076 64.3132C266.737 64.3132 270.615 62.5196 274.001 59.9601C273.668 59.2779 273.323 58.5995 272.981 57.9192C272.292 58.2575 271.6 58.4713 270.916 58.4713C268.483 58.4713 268.468 55.5791 269.683 51.7966C270.442 49.6838 271.104 47.5619 270.443 46.4665C269.969 45.6799 267.059 45.0264 262.675 47.1613C259.003 48.95 258.24 50.8114 258.24 50.8114C257.065 51.7222 251.316 58.6032 251.316 58.6032Z"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M170.974 180.068L169.768 180.508L170.237 179.44L173.67 178.184L173.201 179.255L171.982 179.7L169.985 184.261L168.977 184.631L170.974 180.068"
        fill={color}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M177.238 180.037C177.509 179.394 177.838 178.624 178.193 177.834L178.181 177.842C177.728 178.579 177.2 179.409 176.747 180.104L175.266 182.396L174.491 182.672L174.955 180.759C175.102 180.17 175.299 179.461 175.507 178.789L175.494 178.796C175.148 179.527 174.747 180.371 174.419 181.053L173.416 183.131L172.496 183.458L175.198 177.967L176.521 177.494L176.142 179.149C176.007 179.713 175.836 180.338 175.648 180.937L175.674 180.926C176.073 180.261 176.543 179.502 176.96 178.845L178.232 176.885L179.537 176.425L177.347 181.73L176.381 182.077L177.238 180.037"
        fill={color}
      />
    </>
  );
};

export default SplashScreen;

.container {
  max-width: 20rem;
  margin: auto;
  margin-top: 9em;
  margin-bottom: 9em;
}

.grayscaleMask,
.colorMask {
  * {
    fill: #fff !important;
  }
}

.grayscaleMask path,
.colorMask path {
  animation: waves 0.66s infinite linear;
}

.grayscaleMask g,
.colorMask g {
  animation: 4s raise ease-in alternate infinite;
}

@keyframes waves {
  from {
    transform: translateX(17rem);
  }
  to {
    transform: translateX(-17rem);
  }
}

@keyframes raise {
  from {
    transform: translateY(8rem);
  }
  to {
    transform: translateY(-18rem);
  }
}

any idea about what could be the cause of the problem and how to solve it??

an easy way to reproduce: inject the react component and the styles in any react app note the animation behavior inspect the logo and hover over the HTML corresponding part note the animation behavior again (it should be working fine now)

you can also check this video

CodePudding user response：

it was solved by adding

will-change: contents !important;

to these classes

.grayscaleMask path,
.colorMask path


.grayscaleMask g,
.colorMask g

to be like this

.grayscaleMask path,
.colorMask path {
  animation: waves 0.66s infinite linear;
  will-change: contents;
}

.grayscaleMask g,
.colorMask g {
  animation: 4s raise ease-in alternate infinite;
  will-change: contents;
}

this style should hint to the browser that this element is expected to change and hence make some performance optimizations