CSS动画在Firefox上无法正常工作

时间：2020-06-21 10:52:16

标签： css animation svg

我尝试制作一个简单的动画。一些对象正在360度旋转。当我打开Chrome或移动浏览器时，一切正常。但是它不能在Firefox上正常工作。必须像谷歌浏览器一样按来源中心打开对象。我写了-moz-和-web-kit前缀，这对我没有帮助。

更新

如果您只是在Firefox上打开它，却什么也不做，则可以看到类似Google Chrome的工作。但是，当光标进入屏幕时，动画就会中断。您可以在下面清楚地看到。

enter image description here

您可以在下面看到一个小片段。

#techs {
  animation: rotate 10s infinite linear;
  transform-origin: center;
  transform-box: fill-box;
}

#techs>* {
  animation: inherit;
  animation-direction: reverse;
  transform-origin: inherit;
  transform-box: inherit;
}

#certel:hover {
  cursor: pointer;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

#certel:hover #right-eye {
  transform: scale(0);
  transform-origin: bottom;
  transform-box: fill-box;
}

#certel:hover #eyes-open {
  transform: scale(1);
  transform-origin: bottom;
  transform-box: fill-box;
}

#moving-objects {
  animation: scale 5s infinite ease-in-out;
  transform-origin: center;
}

#certel {
  animation: action 2s infinite alternate;
}

#eyes-open {
  transform: scale(0);
  transition: all 1s ease-in-out;
  transform-origin: bottom;
  transform-box: fill-box;
}

#right-eye {
  transition: all 1s ease-out;
  transform: scale(1);
  transform-origin: bottom;
  transform-box: fill-box;
  animation-delay: 1s;
}

@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(-360deg);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.8);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.8);
  }
}

@keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}

@keyframes eyes-in {
  from {
    transform: scale(0.1);
  }
  to {
    transform: scale(1);
  }
}

@keyframes eyes-out {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.1);
  }
}

@keyframes baboli {
  0% {
    opacity: 0;
    transform: translateY(-1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
<div class="svg">
  <div class="svg-cmd">
    <div class="svg-cmd-header ">
      <div class="svg-cmd-header-icons"></div>
      <div class="svg-cmd-header-icons"></div>
      <div class="svg-cmd-header-icons"></div>
      <div class="svg-cmd-header-text">
      </div>
    </div>
  </div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 40 500 500">
    <g id="group-objects">
      <circle id="circle" cx="252.469" cy="247.273" r="181.496" fill="#FFF5EC"></circle>
      <g id="moving-objects">
   
        </g>
      </g>
    </g>
    <g id="relative-circle">
      <g id="techs">
        <path id="react_1_" fill="#61DAFB" d="M123.159 130.028a29.303 29.303 0 00-1.457-.459c.081-.33.156-.662.225-.994 1.103-5.356.382-9.671-2.082-11.091-2.362-1.362-6.226.058-10.127 3.454-.384.335-.76.68-1.127 1.034a29.007 29.007 0 00-.75-.693c-4.089-3.631-8.188-5.16-10.649-3.736-2.36 1.366-3.058 5.422-2.065 10.499.099.502.21 1.002.335 1.5-.58.165-1.14.34-1.676.527-4.794 1.671-7.856 4.291-7.856 7.008 0 2.806 3.287 5.621 8.28 7.327.405.138.813.265 1.224.383a28.753 28.753 0 00-.355 1.617c-.947 4.988-.208 8.948 2.146 10.306 2.431 1.401 6.511-.04 10.484-3.512.314-.274.629-.565.945-.871.397.383.806.756 1.224 1.117 3.848 3.312 7.649 4.649 10 3.288 2.429-1.406 3.218-5.661 2.193-10.837a24.297 24.297 0 00-.272-1.21c.287-.084.567-.172.842-.263 5.19-1.72 8.568-4.5 8.568-7.344 0-2.729-3.16-5.366-8.05-7.05zm-12.171-7.632c3.343-2.909 6.467-4.058 7.891-3.237 1.516.875 2.106 4.401 1.153 9.026-.063.301-.13.601-.204.9a46.408 46.408 0 00-6.054-.957 45.522 45.522 0 00-3.828-4.777c.34-.326.687-.644 1.042-.955zm-11.689 17.001a56.582 56.582 0 002.705 4.668 41.185 41.185 0 01-4.173-.671c.4-1.291.893-2.632 1.468-3.997zm-.002-4.549a42.54 42.54 0 01-1.438-3.918 43.912 43.912 0 014.104-.705 56.787 56.787 0 00-2.666 4.623zm1.028 2.275a55.32 55.32 0 014.121-7.146 54.699 54.699 0 018.253.001 58.01 58.01 0 012.182 3.483c.69 1.189 1.341 2.4 1.952 3.633a58.607 58.607 0 01-1.945 3.665 64.198 64.198 0 01-2.172 3.505 58.267 58.267 0 01-4.146.146c-1.409 0-2.779-.044-4.1-.129a54.6 54.6 0 01-4.145-7.158zm16.239 4.604c.456-.79.894-1.59 1.313-2.399.576 1.3 1.083 2.63 1.521 3.983a41.346 41.346 0 01-4.224.72c.478-.759.942-1.527 1.39-2.304zm1.295-6.878a68.322 68.322 0 00-1.302-2.356 62.078 62.078 0 00-1.377-2.265c1.445.183 2.829.425 4.128.722a41.261 41.261 0 01-1.449 3.899zm-9.268-10.115a41.593 41.593 0 012.665 3.217 57.205 57.205 0 00-5.352-.001 43.293 43.293 0 012.687-3.216zm-10.43-5.517c1.515-.877 4.865.373 8.396 3.508.226.201.452.41.679.627a46.244 46.244 0 00-3.857 4.773 47.397 47.397 0 00-6.042.939 29.905 29.905 0 01-.312-1.395c-.852-4.348-.286-7.629 1.136-8.452zm-2.208 23.706a25.354 25.354 0 01-1.117-.35 16.406 16.406 0 01-5.281-2.806 3.996 3.996 0 01-1.69-2.692c0-1.648 2.458-3.751 6.558-5.181a28.16 28.16 0 011.559-.49 46.439 46.439 0 002.207 5.719 46.88 46.88 0 00-2.236 5.8zm10.483 8.817a16.375 16.375 0 01-5.069 3.173 3.997 3.997 0 01-3.176.119c-1.428-.824-2.022-4.003-1.212-8.269.096-.504.207-1.005.331-1.503 2.012.432 4.05.727 6.102.883a47.016 47.016 0 003.887 4.803c-.282.271-.57.536-.863.794zm2.209-2.186a43.524 43.524 0 01-2.725-3.261c.867.034 1.75.051 2.649.051.922 0 1.834-.02 2.733-.061a40.652 40.652 0 01-2.657 3.271zm11.746 2.691a3.996 3.996 0 01-1.482 2.811c-1.427.826-4.479-.248-7.77-3.079-.377-.325-.757-.67-1.139-1.038a45.548 45.548 0 003.795-4.819 45.192 45.192 0 006.132-.945c.092.373.174.738.245 1.095a16.34 16.34 0 01.219 5.975zm1.643-9.661c-.248.082-.502.161-.761.238a45.326 45.326 0 00-2.293-5.736 45.482 45.482 0 002.204-5.652c.463.134.913.275 1.346.425 4.191 1.442 6.746 3.575 6.746 5.218-.001 1.749-2.761 4.022-7.242 5.507z"></path>
        <path id="sass_1_" fill="#CD6799" d="M187.189 410.391a8.872 8.872 0 00-3.881.899c-.399-.79-.798-1.495-.869-2.011-.078-.603-.172-.971-.078-1.689.094-.721.517-1.746.509-1.824-.008-.078-.094-.445-.955-.453-.861-.009-1.604.164-1.69.391a9.367 9.367 0 00-.36 1.275c-.149.783-1.722 3.576-2.622 5.039-.29-.57-.54-1.072-.595-1.471-.079-.604-.172-.971-.079-1.69.094-.72.517-1.745.509-1.823s-.094-.445-.955-.453-1.604.164-1.69.391-.18.76-.36 1.275c-.18.517-2.27 5.181-2.817 6.386a37.08 37.08 0 01-.697 1.448s-.008.023-.032.063c-.148.289-.234.445-.234.445v.008c-.117.211-.242.407-.305.407-.047 0-.133-.563.016-1.331.313-1.619 1.057-4.139 1.049-4.225 0-.047.141-.485-.485-.713-.61-.227-.829.148-.884.148-.054 0-.093.134-.093.134s.68-2.833-1.299-2.833c-1.236 0-2.942 1.354-3.788 2.574-.532.29-1.667.908-2.88 1.573-.461.259-.939.517-1.385.759-.032-.031-.063-.07-.094-.102-2.395-2.559-6.823-4.366-6.636-7.802.071-1.252.5-4.538 8.506-8.53 6.589-3.246 11.832-2.348 12.739-.352 1.299 2.848-2.809 8.139-9.617 8.906-2.598.289-3.959-.713-4.304-1.089-.359-.392-.415-.415-.548-.337-.219.118-.078.471 0 .674.204.531 1.041 1.471 2.457 1.933 1.252.407 4.296.634 7.982-.79 4.124-1.597 7.348-6.033 6.401-9.751-.947-3.771-7.207-5.016-13.131-2.911-3.521 1.253-7.34 3.225-10.087 5.791-3.263 3.052-3.779 5.705-3.568 6.816.759 3.943 6.197 6.51 8.373 8.412-.11.063-.211.117-.298.164-1.087.54-5.235 2.707-6.268 5-1.174 2.599.188 4.461 1.087 4.711 2.794.775 5.666-.617 7.208-2.919 1.541-2.3 1.354-5.29.642-6.659a.181.181 0 00-.031-.047c.281-.164.571-.336.853-.5a41.378 41.378 0 011.572-.885c-.266.728-.462 1.596-.556 2.848-.117 1.472.485 3.381 1.276 4.133.352.328.767.336 1.033.336.923 0 1.338-.768 1.8-1.674.563-1.111 1.072-2.403 1.072-2.403s-.634 3.49 1.088 3.49c.626 0 1.26-.813 1.541-1.229v.008s.016-.023.047-.078l.102-.164v-.016a68.34 68.34 0 001.651-3.083c1.08-2.129 2.121-4.789 2.121-4.789s.093.648.414 1.729c.188.635.579 1.33.892 2.004-.25.352-.407.547-.407.547l.008.009c-.204.265-.423.556-.666.837-.853 1.018-1.87 2.184-2.01 2.52-.165.399-.125.688.187.924.228.172.634.195 1.049.172.767-.055 1.307-.242 1.573-.359.415-.148.9-.376 1.354-.713.837-.618 1.346-1.502 1.299-2.668-.023-.643-.234-1.283-.493-1.887.078-.109.148-.219.227-.328 1.323-1.933 2.348-4.054 2.348-4.054s.094.649.415 1.729c.157.548.478 1.143.759 1.722-1.244 1.009-2.011 2.183-2.285 2.95-.492 1.424-.109 2.066.619 2.215.329.07.798-.086 1.142-.234a5.27 5.27 0 001.448-.744c.837-.617 1.643-1.479 1.596-2.645-.023-.533-.164-1.057-.36-1.564 1.056-.439 2.417-.682 4.155-.479 3.725.438 4.461 2.763 4.319 3.74-.14.979-.923 1.511-1.181 1.676-.258.164-.344.219-.321.336.031.172.157.164.375.133.305-.055 1.956-.79 2.027-2.59.119-2.301-2.072-4.813-5.946-4.789zm-28.735 9.687c-1.236 1.346-2.958 1.854-3.701 1.424-.798-.461-.485-2.449 1.033-3.873.924-.869 2.113-1.674 2.903-2.168.18-.109.446-.266.767-.461.055-.032.087-.047.087-.047l.187-.118c.555 2.034.023 3.827-1.276 5.243zm8.999-6.119c-.43 1.049-1.33 3.732-1.877 3.584-.47-.125-.759-2.16-.094-4.171.336-1.009 1.049-2.215 1.464-2.685.672-.751 1.416-1.002 1.596-.696.226.4-.822 3.31-1.089 3.968zm7.427 3.553c-.181.094-.353.156-.431.109-.054-.031.078-.156.078-.156s.932-1.002 1.299-1.456c.211-.266.461-.579.728-.931v.102c.001 1.197-1.158 2.003-1.674 2.332zm5.728-1.307c-.133-.095-.109-.407.336-1.386.173-.384.58-1.024 1.276-1.644.078.251.133.494.125.721-.008 1.51-1.088 2.074-1.737 2.309z"></path>
        <g id="vue_1_">
          <path fill="#41B883" d="M177.17-88.916l-3.713-6.429-3.712 6.429h-12.361l16.073-27.84 16.074 27.84H177.17z" transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34) translate(178.06 235.01)"></path>
          <path fill="#34495E" d="M177.17-88.916l-3.713-6.429-3.712 6.429h-5.931l9.643-16.703 9.645 16.703h-5.932z" transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34) translate(178.06 235.01)"></path>
        </g>
        <g id="javascript_1_">
          <path fill="#F7DF1E" d="M228.879 45.192H272.05899999999997V88.372H228.879z"></path>
          <path d="M257.885 78.927c.869 1.42 2.001 2.464 4.003 2.464 1.681 0 2.755-.841 2.755-2.001 0-1.392-1.104-1.884-2.954-2.694l-1.014-.436c-2.929-1.247-4.873-2.81-4.873-6.113 0-3.043 2.317-5.36 5.942-5.36 2.579 0 4.434.897 5.771 3.249l-3.16 2.029c-.695-1.248-1.446-1.739-2.61-1.739-1.188 0-1.942.754-1.942 1.739 0 1.218.754 1.71 2.495 2.464l1.014.435c3.448 1.478 5.395 2.985 5.395 6.374 0 3.653-2.87 5.654-6.724 5.654-3.769 0-6.203-1.795-7.395-4.149l3.297-1.916zm-14.334.351c.638 1.131 1.218 2.087 2.611 2.087 1.333 0 2.174-.522 2.174-2.55V65.019h4.058v13.852c0 4.201-2.463 6.114-6.059 6.114-3.249 0-5.13-1.681-6.087-3.707l3.303-2z"></path>
        </g>
        <g id="node_1_">
          <g fill-rule="evenodd" clip-rule="evenodd">
            <path fill="#333" d="M310.975 414.782a.94.94 0 00-.471-.819l-7.807-4.492a.906.906 0 00-.429-.123h-.082a.926.926 0 00-.43.123l-7.807 4.492a.947.947 0 00-.471.819l.017 12.096c0 .168.088.325.235.407a.454.454 0 00.469 0l4.639-2.656a.949.949 0 00.472-.818v-5.65a.94.94 0 01.47-.816l1.977-1.138a.938.938 0 01.941 0l1.975 1.138a.938.938 0 01.472.816v5.65c0 .336.181.646.473.818l4.638 2.656a.47.47 0 00.706-.407l.013-12.096zM348.532 398.154a.473.473 0 00-.701.412v11.979a.331.331 0 01-.496.286l-1.954-1.127a.943.943 0 00-.942.001l-7.809 4.506a.944.944 0 00-.471.816v9.015c0 .337.18.647.471.816l7.808 4.51a.94.94 0 00.943 0l7.81-4.51a.942.942 0 00.472-.816V401.57a.94.94 0 00-.484-.822l-4.647-2.594zm-.724 22.926a.238.238 0 01-.118.204l-2.682 1.545a.233.233 0 01-.234 0l-2.682-1.545a.236.236 0 01-.118-.204v-3.096c0-.084.045-.162.118-.204l2.681-1.548a.23.23 0 01.235 0l2.682 1.548c.072.042.118.12.118.204v3.096zM374.532 417.904a.944.944 0 00.469-.816v-2.184a.942.942 0 00-.469-.816l-7.759-4.504a.942.942 0 00-.944-.002l-7.807 4.506a.946.946 0 00-.471.817v9.012c0 .339.182.651.478.819l7.756 4.42a.941.941 0 00.925.006l4.691-2.608a.472.472 0 00.007-.82l-7.856-4.509a.472.472 0 01-.236-.409v-2.825c0-.168.089-.323.235-.407l2.444-1.409a.474.474 0 01.472 0l2.445 1.409a.47.47 0 01.237.407v2.223a.47.47 0 00.708.408l4.675-2.718z"></path>
            <path fill="#699F63" d="M366.187 417.481a.183.183 0 01.181 0l1.499.864a.18.18 0 01.09.157v1.729a.181.181 0 01-.09.157l-1.499.864a.178.178 0 01-.181 0l-1.497-.864a.18.18 0 01-.091-.157v-1.729c0-.065.034-.125.091-.157l1.497-.864z"></path>
          </g>
          <defs>
            <path id="SVGID_1_" d="M323.099 409.63l-7.765 4.479a.942.942 0 00-.468.813v8.969a.94.94 0 00.468.813l7.765 4.484c.29.168.647.168.938 0l7.763-4.484a.94.94 0 00.468-.813v-8.969a.94.94 0 00-.47-.813l-7.761-4.479a.935.935 0 00-.938 0"></path>
          </defs>
          <clipPath id="SVGID_2_">
            <use overflow="visible" xlink:href="#SVGID_1_"></use>
          </clipPath>
          <linearGradient id="SVGID_3_" x1="-47.339" x2="-47.155" y1="553.322" y2="553.322" gradientTransform="scale(-86.4802 86.4802) rotate(63.886 414.342 313.982)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#41873F"></stop>
            <stop offset="0.329" stop-color="#418B3D"></stop>
            <stop offset="0.635" stop-color="#419637"></stop>
            <stop offset="0.932" stop-color="#3FA92D"></stop>
            <stop offset="1" stop-color="#3FAE2A"></stop>
          </linearGradient>
          <path fill="url(#SVGID_3_)" d="M340.113 413.35L328.896 436.233 307.019 425.51 318.237 402.625z" clip-path="url(#SVGID_2_)"></path>
          <defs>
            <path id="SVGID_4_" d="M315.058 424.461c.074.097.167.18.276.242l6.66 3.847 1.109.638a.938.938 0 00.726.088l8.187-14.992a.982.982 0 00-.218-.174l-5.084-2.934-2.687-1.546a.885.885 0 00-.243-.098l-8.726 14.929z"></path>
          </defs>
          <clipPath id="SVGID_5_">
            <use overflow="visible" xlink:href="#SVGID_4_"></use>
          </clipPath>
          <linearGradient id="SVGID_6_" x1="-48.999" x2="-48.815" y1="549.275" y2="549.275" gradientTransform="scale(132.7982 -132.7982) rotate(36.459 815.39 351.127)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#41873F"></stop>
            <stop offset="0.138" stop-color="#41873F"></stop>
            <stop offset="0.403" stop-color="#54A044"></stop>
            <stop offset="0.714" stop-color="#66B848"></stop>
            <stop offset="0.908" stop-color="#6CC04A"></stop>
            <stop offset="1" stop-color="#6CC04A"></stop>
          </linearGradient>
          <path fill="url(#SVGID_6_)" d="M305.6 416.521L326.028 401.428 341.476 422.335 321.046 437.43z" clip-path="url(#SVGID_5_)"></path>
          <g>
            <defs>
              <path id="SVGID_7_" d="M323.099 409.63l-7.765 4.479a.942.942 0 00-.468.813v8.969a.94.94 0 00.468.813l7.765 4.484c.29.168.647.168.938 0l7.763-4.484a.94.94 0 00.468-.813v-8.969a.94.94 0 00-.47-.813l-7.761-4.479a.935.935 0 00-.938 0"></path>
            </defs>
            <clipPath id="SVGID_8_">
              <use overflow="visible" xlink:href="#SVGID_7_"></use>
            </clipPath>
            <g clip-path="url(#SVGID_8_)">
              <defs>
                <path id="SVGID_9_" d="M322.84 407.982L322.733 408.043 322.876 408.043z"></path>
              </defs>
              <clipPath id="SVGID_10_">
                <use overflow="visible" xlink:href="#SVGID_9_"></use>
              </clipPath>
              <linearGradient id="SVGID_11_" x1="-47.248" x2="-47.061" y1="548.545" y2="548.545" gradientTransform="matrix(97.417 0 0 -97.417 4917.313 53845.625)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#6CC04A"></stop>
                <stop offset="0.092" stop-color="#6CC04A"></stop>
                <stop offset="0.286" stop-color="#66B848"></stop>
                <stop offset="0.597" stop-color="#54A044"></stop>
                <stop offset="0.862" stop-color="#41873F"></stop>
                <stop offset="1" stop-color="#41873F"></stop>
              </linearGradient>
              <path fill="url(#SVGID_11_)" d="M322.733 407.982H322.876V408.043H322.733z" clip-path="url(#SVGID_10_)"></path>
            </g>
          </g>
          <g>
            <defs>
              <path id="SVGID_12_" d="M323.473 409.509a.94.94 0 00-.374.121l-7.743 4.468 8.348 15.205a.936.936 0 00.334-.115l7.763-4.484a.943.943 0 00.453-.641l-8.511-14.539a1.01 1.01 0 00-.27-.015"></path>
            </defs>
            <clipPath id="SVGID_13_">
              <use overflow="visible" xlink:href="#SVGID_12_"></use>
            </clipPath>
            <linearGradient id="SVGID_14_" x1="-47.247" x2="-47.063" y1="549.063" y2="549.063" gradientTransform="matrix(97.417 0 0 -97.417 4917.313 53907.438)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stop-color="#6CC04A"></stop>
              <stop offset="0.092" stop-color="#6CC04A"></stop>
              <stop offset="0.286" stop-color="#66B848"></stop>
              <stop offset="0.597" stop-color="#54A044"></stop>
              <stop offset="0.862" stop-color="#41873F"></stop>
              <stop offset="1" stop-color="#41873F"></stop>
            </linearGradient>
            <path fill="url(#SVGID_14_)" d="M315.355 409.506H332.252V429.303H315.355z" clip-path="url(#SVGID_13_)"></path>
          </g>
          <g>
            <defs>
              <path id="SVGID_15_" d="M323.099 409.63l-7.765 4.479a.942.942 0 00-.468.813v8.969a.94.94 0 00.468.813l7.765 4.484c.29.168.647.168.938 0l7.763-4.484a.94.94 0 00.468-.813v-8.969a.94.94 0 00-.47-.813l-7.761-4.479a.935.935 0 00-.938 0"></path>
            </defs>
            <clipPath id="SVGID_16_">
              <use overflow="visible" xlink:href="#SVGID_15_"></use>
            </clipPath>
            <g clip-path="url(#SVGID_16_)">
              <defs>
                <path id="SVGID_17_" d="M332.543 424.559L332.492 424.471 332.492 424.589z"></path>
              </defs>
              <clipPath id="SVGID_18_">
                <use overflow="visible" xlink:href="#SVGID_17_"></use>
              </clipPath>
              <linearGradient id="SVGID_19_" x1="-47.23" x2="-47.063" y1="549.295" y2="549.295" gradientTransform="matrix(97.417 0 0 -97.417 4917.313 53935.25)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#6CC04A"></stop>
                <stop offset="0.092" stop-color="#6CC04A"></stop>
                <stop offset="0.286" stop-color="#66B848"></stop>
                <stop offset="0.597" stop-color="#54A044"></stop>
                <stop offset="0.862" stop-color="#41873F"></stop>
                <stop offset="1" stop-color="#41873F"></stop>
              </linearGradient>
              <path fill="url(#SVGID_19_)" d="M332.492 424.471H332.543V424.589H332.492z" clip-path="url(#SVGID_18_)"></path>
            </g>
          </g>
          <g>
            <defs>
              <path id="SVGID_20_" d="M323.099 409.63l-7.765 4.479a.942.942 0 00-.468.813v8.969a.94.94 0 00.468.813l7.765 4.484c.29.168.647.168.938 0l7.763-4.484a.94.94 0 00.468-.813v-8.969a.94.94 0 00-.47-.813l-7.761-4.479a.935.935 0 00-.938 0"></path>
            </defs>
            <clipPath id="SVGID_21_">
              <use overflow="visible" xlink:href="#SVGID_20_"></use>
            </clipPath>
            <g clip-path="url(#SVGID_21_)">
              <defs>
                <path id="SVGID_22_" d="M331.818 424.703l-7.772 4.484a.903.903 0 01-.343.117l.155.281 8.634-4.997v-.118l-.214-.365a.975.975 0 01-.46.598"></path>
              </defs>
              <clipPath id="SVGID_23_">
                <use overflow="visible" xlink:href="#SVGID_22_"></use>
              </clipPath>
              <linearGradient id="SVGID_24_" x1="-47.248" x2="-47.063" y1="549.401" y2="549.401" gradientTransform="matrix(97.417 0 0 -97.417 4917.313 53947.875)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#6CC04A"></stop>
                <stop offset="0.092" stop-color="#6CC04A"></stop>
                <stop offset="0.286" stop-color="#66B848"></stop>
                <stop offset="0.597" stop-color="#54A044"></stop>
                <stop offset="0.862" stop-color="#41873F"></stop>
                <stop offset="1" stop-color="#41873F"></stop>
              </linearGradient>
              <path fill="url(#SVGID_24_)" d="M323.703 424.105H332.49199999999996V429.58500000000004H323.703z" clip-path="url(#SVGID_23_)"></path>
            </g>
          </g>
          <g>
            <defs>
              <path id="SVGID_25_" d="M323.099 409.63l-7.765 4.479a.942.942 0 00-.468.813v8.969a.94.94 0 00.468.813l7.765 4.484c.29.168.647.168.938 0l7.763-4.484a.94.94 0 00.468-.813v-8.969a.94.94 0 00-.47-.813l-7.761-4.479a.935.935 0 00-.938 0"></path>
            </defs>
            <clipPath id="SVGID_26_">
              <use overflow="visible" xlink:href="#SVGID_25_"></use>
            </clipPath>
            <g clip-path="url(#SVGID_26_)">
              <defs>
                <path id="SVGID_27_" d="M331.818 424.703l-7.772 4.484a.903.903 0 01-.343.117l.155.281 8.634-4.997v-.118l-.214-.365a.975.975 0 01-.46.598"></path>
              </defs>
              <clipPath id="SVGID_28_">
                <use overflow="visible" xlink:href="#SVGID_27_"></use>
              </clipPath>
              <linearGradient id="SVGID_29_" x1="-47.816" x2="-47.632" y1="552.229" y2="552.229" gradientTransform="scale(-136.498 136.498) rotate(63.886 415.297 314.003)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#41873F"></stop>
                <stop offset="0.329" stop-color="#418B3D"></stop>
                <stop offset="0.635" stop-color="#419637"></stop>
                <stop offset="0.932" stop-color="#3FA92D"></stop>
                <stop offset="1" stop-color="#3FAE2A"></stop>
              </linearGradient>
              <path fill="url(#SVGID_29_)" d="M334.656 425.168L330.788 433.06 321.537 428.524 325.405 420.633z" clip-path="url(#SVGID_28_)"></path>
            </g>
          </g>
        </g>
        <g id="gridsome_1_">
          <linearGradient id="SVGID_30_" x1="417.623" x2="417.623" y1="189.817" y2="167.523" gradientTransform="matrix(1 0 0 -1 8.4 477.04)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#00583E"></stop>
            <stop offset="1" stop-color="#00835C"></stop>
          </linearGradient>
          <path fill="url(#SVGID_30_)" d="M441.284 287.41c1.816-.088 3.425 1.321 3.581 3.139.68 8.795-7.369 18.647-18.712 18.963-9.559.236-19.012-7.416-19.012-18.987 0-1.823 1.507-3.302 3.325-3.302s3.292 1.479 3.292 3.302c0 7.61 6.12 12.536 12.232 12.386 7.524-.209 12.417-6.725 12.162-12.045a3.3 3.3 0 013.132-3.456z"></path>
          <path fill="#00A672" d="M433.059 290.78c0-1.867 1.523-3.38 3.401-3.38h4.957c1.879 0 3.448 1.513 3.448 3.38s-1.569 3.38-3.448 3.38h-4.957c-1.878 0-3.401-1.513-3.401-3.38zM422.658 290.785c0-1.869 1.514-3.385 3.378-3.385s3.378 1.516 3.378 3.385-1.514 3.385-3.378 3.385-3.378-1.516-3.378-3.385zM429.32 274.969a3.3 3.3 0 01-3.153 3.436c-7.844.326-12.632 6.491-12.398 12.345.072 1.821-1.313 3.358-3.13 3.431-1.816.072-3.414-1.398-3.487-3.22-.379-9.538 7.563-18.968 18.742-19.153a3.293 3.293 0 013.426 3.161z"></path>
        </g>
      </g>
        
          <path fill="#B64401" d="M297.298 205.815c-.1.08-.271.16-.49.23-.79.26-2.3.45-4.38.59-.49.03-1.02.06-1.58.08-.08.01-.16.01-.24.01-.409.02-.83.04-1.27.05-.33.02-.68.03-1.04.04-.59.02-1.21.03-1.85.04-18.37.36-55.01-1.13-72.331-1.91-.32-.01-.63-.03-.93-.04-.91-.04-1.76-.08-2.54-.11-.42-.02-.81-.04-1.19-.06-3.06-.14-4.83-.23-4.83-.23-.51-.55-1.06-1.25-1.62-2.06-3.41-4.84-7.35-13.41-5.08-15.18 2.65-2.07 6.62-.51 6.7-1.72.09-1.21-6.25-10.52-3.69-13.45 2.57-2.93 2.57-.34 3.69-1.38.65-.6-1.17-4.97-1.56-9.38-.06-.6-.08-1.2-.08-1.79.04-2.56.75-4.95 2.93-6.42 1.51-1.02 2.4-1.83 2.92-2.49 1.71-2.15-.36-2.82 2.49-4.4 3.73-2.07 8.56 1.03 8.56 1.03s6.72-12.58 10.17-13.1c3.45-.52 3.1 4.65 6.04 3.96 2.93-.69 7.24-6.72 10.86-7.93 5.229-1.74-1.48 5.52 1.03 5.52 2.52 0 8.11-6.9 16.21-8.1 2.76 2.41-1.21 6.38 5.17 7.41 6.38 1.04 3.449 6.55 7.59 8.45 4.14 1.9 3.62.52 7.76 1.9 4.13 1.37 2.63 2.75 3.81 7.24 1.19 4.48.15 5.34 4.551 7.76 4.399 2.41 9.01 4.31 6.699 9.65-2.3 5.35-2.689 9.14 0 8.1 2.7-1.03 3.211-1.2 2.521 1.9-.69 3.1-5.86 10.35-1.55 10.35 4.31 0 .47 12.36-3.45 15.44z"></path>
          <path fill="#B64401" d="M294.058 203.565l-.03.96c-.05 1.04-.75 1.79-1.6 2.11-.51.19-1.08.23-1.58.08-.03 0-.06-.01-.09-.02-.05.02-.1.03-.15.03-.409.12-.85.13-1.27.05a2.28 2.28 0 01-1.021-.44c-.31-.24-.56-.56-.699-.96a2.403 2.403 0 01-.13-.92c.17-3.81-.16-7.44-1.08-11.16-.391-1.55.64-2.61 1.83-2.85.039-.02.09-.02.13-.03-.19-.82-.41-1.63-.66-2.43 0-.01 0-.01-.01-.02a29.446 29.446 0 00-1.506-3.898c-.075-.15-.146-.303-.225-.452-.08-.15-.16-.3-.24-.44-.01-.02-.01-.03-.02-.05-.05-.11-.12-.23-.19-.34a4.76 4.76 0 00-.39-.65 17.92 17.92 0 00-1.771-2.43c-.05-.06-.1-.13-.159-.19-3.311-3.78-7.9-6.16-12.74-8.09-11.61-4.61-25.12-4.27-37.28-1.42.35 1.69-.34 3.52-2.5 4-6.18 2.06-10.91 5.33-16.01 8.94h-.01c-.67.47-1.34.95-2.03 1.43 0 2.08-.17 4.22-.58 6.45-.03.2-.08.4-.14.59.78 1.91 1.47 3.98 1.85 6.04.03.03.05.06.08.09.33.38.63.84.85 1.39.76 1.91.36 3.59-.63 4.96v.01c-.25.36-.54.69-.87 1-.02.03-.05.05-.08.08-.34.62-.78 1.17-1.28 1.63-.65.61-1.41 1.08-2.23 1.41-.23.08-.47.16-.71.22-.14.05-.27.08-.41.11-1.72.38-3.6.17-5.28-.74-.96-.52-1.93-1.27-2.86-2.19.47-.97 1.08-1.79 1.8-2.37.29-.24.58-.44.87-.61-3.41-4.84-7.35-13.41-5.08-15.18 2.65-2.07 6.62-.51 6.7-1.72.09-1.21-6.25-10.52-3.69-13.45 2.57-2.93 2.57-.34 3.69-1.38.65-.6-1.17-4.97-1.56-9.38.02-.01.05-.01.07-.02-.08-.59-.14-1.19-.15-1.77.04-2.56.75-4.95 2.93-6.42 1.51-1.02 2.4-1.83 2.92-2.49.38.1.69.49.55.92-1.19 3.52-2.59 6.21-1.21 9.94.83-.95 1.72-1.83 2.67-2.7 1.99-1.82 4.85.78 3.48 2.79.73.03 1.45.14 2.16.33 1.53-3.49 3.27-6.8 7.12-8.46 1.44-.62 3.4.41 2.85 2.2-.14.44-.3.95-.46 1.5.36-.62.65-1.11.82-1.36 1.24-1.85 3.95-2.35 5.87-1.53 2.03-1.95 4.1-3.86 6.22-5.68 3.52-3.02 6.86-5.07 11.57-4.38 2.959.43 3.11 4.84.799 6.15-.76.48-1.5 1-2.22 1.52-.79.63-1.53 1.32-2.23 2.09l-.02.03c-.18.27-1.7 2.15-2.67 3.24.06.08.14.14.19.22 2.75-.48 5.59-1.87 7.81-2.77 3.48-1.41 6.72-2.4 10.51-2.45 2.63-.03 4.04 2.44 3.79 4.61 3.54.13 7.08.15 10.641.01 1.479-.06 2.18 1.37 2 2.62-.13.82-.32 1.53-.59 2.19.96-.12 1.93-.2 2.899-.23 1.15-.02 1.271 1.59.26 1.92-1.989.67-4.029 1.15-6.05 1.73-1.17.34-2.37-1.02-1.75-2.1-1.479.51-2.95.77-4.45.85 2.24.68 4.41 1.51 6.5 2.54 13.562 6.69 18.532 23.101 18.162 37.19z" opacity="0.31"></path>
          <path fill="#FFB890" d="M212.388 227.096c-.2 0-.39-.01-.58-.03-12.29-.68-14.81-14.96-11.47-21.64.47-.97 1.08-1.79 1.8-2.37.29-.24.58-.44.87-.61 2.62-1.58 4.84-.5 6.42.98.46.44.87.91 1.22 1.37.58.75.99 1.45 1.18 1.82.1.17.15.27.15.27l.41 20.21z"></path>
          <path fill="#F29B62" d="M206.683 214.295c.034-.262.084-.522.146-.78.396-1.648 1.357-3.282 2.297-4.683.225-.334-.208-.752-.542-.551-3.048 1.836-5.708 5.773-4.432 9.46.978 2.826 5.614 4.692 7.109 1.282 1.178-2.684-1.648-6.546-4.578-4.728z"></path>
          <path fill="#FFB890" d="M285.788 228.456c-.03.01-.05.01-.08.01a8.7 8.7 0 01-.521.02l.011-.69.399-19.51s.3-.62.851-1.43c.47-.69 1.119-1.52 1.93-2.23 1.74-1.54 4.2-2.49 7.06-.17.521.42.98.96 1.37 1.59 3.95 6.26 1.759 21.7-11.02 22.41z"></path>
          <path fill="#F29B62" d="M290.889 215.694a7.753 7.753 0 00-.146-.78c-.396-1.648-1.357-3.282-2.298-4.683-.225-.334.209-.752.542-.552 3.048 1.836 5.709 5.773 4.432 9.461-.978 2.826-5.614 4.692-7.109 1.281-1.178-2.683 1.648-6.545 4.579-4.727z"></path>
          <path fill="#FFC9AE" d="M288.215 194.186c0 3.65-.039 7.13-.149 10.44-.021.74-.05 1.47-.08 2.19-.12 3.14-.31 6.12-.58 8.95-.19 1.98-.41 3.89-.69 5.72-.35 2.43-.779 4.73-1.31 6.9 0 .02 0 .05-.01.08-1.53 6.29-3.83 11.44-7.22 15.44-5.931 7.01-15.2 10.52-29.57 10.52-14.58 0-23.92-3.61-29.84-10.84-2.82-3.44-4.86-7.71-6.33-12.79-.34-1.2-.66-2.44-.94-3.73-.49-2.22-.89-4.57-1.21-7.05-.24-1.77-.43-3.62-.59-5.53-.26-3.07-.44-6.32-.55-9.75-.01-.43-.03-.87-.03-1.31-.09-2.95-.12-6.03-.12-9.24-.001-36.721 79.219-36.721 79.219 0z"></path>
        </g>
       
      </g>
    </g>
  </svg>
</div>

2 个答案:

答案 0 :(得分：1)

似乎Firefox中存在错误。似乎可能会感到困惑，因为您正在为#techs组及其子级使用相同的动画。

解决方法是将父组动画更改为使用绝对transform-origin。我已经使用了背景圆心的坐标。它还具有使旋转动画更平滑的优点。

#techs {
     animation: rotate 10s infinite linear;
     transform-origin: 252px 247px;
}
 #techs > * {
     animation: inherit;
     animation-direction: reverse;
     transform-origin: center;
     transform-box: fill-box;
}

答案 1 :(得分：-1)

还将-moz-用于动画以及动画属性-

@-moz-keyframes animation-name {
  -moz-transform: ;
}

与相关问题的链接为right here。快来看看吧！
如果有可用更新，请尝试更新Firefox浏览器！

相关问题
最新问题