Question

我试图在Firefox上发挥这种效果但是＆＃34; transfrom-origin＆＃39;工作不正常，Firefox上的结果看起来有所不同。我想模仿挥舞效果，它在Chrome和Opera以及Vivaldi中完美地工作，因为IE我真的不在乎！谢谢

 .arm-wave 
          {
          -webkit-transform-origin: top left;
          -webkit-animation: wave 2s ease-in-out infinite;
          -moz-animation: wave 2s ease-in-out infinite;
          -o-transform: wave 2s ease-in-out infinite;
          transform: wave 2s ease-in-out infinite;
          -ms-transform: wave 2s ease-in-out infinite;
         }
@-webkit-keyframes wave  
          {
     0% {-webkit-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
          }
     20% {-webkit-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
         }
     40% {
          -webkit-transform: rotate(-160deg) translate(-23px);transform:  rotate(-160deg) translate(-23px);
         }
     60% {
          -webkit-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
         }
     80% {
          -webkit-transform: rotate(-160deg) translate(-23px);transform:     rotate(-160deg) translate(-23px);

        }

   100% {
         -webkit-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
       }
     }
 @-moz-keyframes wave {

    0% {
        -moz-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
       }
   20% {
       -moz-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
       }
  40% {
       -moz-transform: rotate(-160deg) translate(-23px);transform: rotate(-160deg) translate(-23px);

      }
  60% {
      -moz-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
      }
  80% {
      -moz-transform: rotate(-160deg) translate(-23px);transform: rotate(-160deg) translate(-23px);
    }
 100% {
     -moz-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
      }
   }

这是HTML部分：

    <div id="my-svg-shape"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="591.1px"
     height="768px" viewBox="0 0 591.1 768" style="enable-background:new 0 0 591.1 768;" xml:space="preserve">
  <g id="shape">
<rect id="body" x="215.6" y="240.6" class="sweater-color" width="133.7" height="230.9"/>
    <g id="right-arm" class="arm-wave">
      <rect id="right-hand" x="375.6" y="403.9" class="skin-color" width="46.5" height="16.8"/>
      <rect id="right-el" x="375.6" y="249.8" class="sweater-color" width="46.5" height="151.6"/>
    </g>
    <g id="left-arm">
      <rect id="left-el" x="143.2" y="249.8" class="sweater-color" width="46.5" height="151.6"/>
      <rect id="left-hand" x="143.2" y="403.9" class="skin-color" width="46.5" height="16.8"/>
    </g>


  </g>
  </svg> </div>

http://jsfiddle.net/rizkallah/wxs0v9gx/1/

Answer 1

我在评论中提到的FF对transform-origin有不同的解释（至少我理解），但自那次评论以来我做了一些额外的（快速）研究。链接的文章https://css-tricks.com/svg-animation-on-css-transforms/包含大量信息。

Chrome使用50% 50与正在转换的对象的中心相关联。

Firefox使用50% 50%与 SVG父级的中心相关。

因此，Chrome的top left会在Firefox中转换为Xpx Ypx，其中X和Y是转换元素的左上角坐标。

所以...为右臂

<g id="right-arm" class="arm-wave">
      <rect id="right-hand" x="375.6" y="403.9" class="skin-color" width="46.5" height="16.8"/>
      <rect id="right-el" **x="375.6" y="249.8" class="sweater-color" width="46.5" height="151.6"/>
</g>

我们会用......

transform-origin: 375.6px 249.8px;
-webkit-transform-origin: top left;

JSfiddle Demo

transform-origin不适用于firefox

1 个答案: