motion-pathmotion-rotation无效。其余所有浏览器都可以正常工作。



@keyframes whoosh {
  from {
    motion-offset: 0%;
  }
  to {
    motion-offset: 100%;
  }
}
#path {
  position: absolute;
  top: 40px;
  left: 0px;
  width: 100%;
}
#zeplin {
  motion-path: path("M1528,74 C1528,74 1373,133.857147 1268.50505,133.857143 C1164.0101,133.857138 1044.60849,63.2746747 942.414141,45.2857143 C840.219794,27.2967539 749.351683,18.0222476 595.72201,85.3965342 C442.092336,152.770821 424.504306,178.600216 316.186064,168.137541 C294.677978,156.981816 226.287635,133.857145 219.453224,52.0727741 C212.618812,29.7115971 316.186058,-10.3505382 284.713623,99.4034497 C253.241188,209.157438 1.06334642,60.6018191 1,60.6018191");
  motion-rotation: reverse 20deg;
  animation-name: whoosh;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

<img id="zeplin" src="https://zeplin.io/img/icZeplin.svg" alt="zeplin">

最佳答案

http://caniuse.com/#feat=css-motion-paths
显示当前支持CSS Motion Path的浏览器:Chrome和Opera。

10-05 20:58
查看更多