Question

motion-path和motion-rotation无法使用safari。所有其他浏览器都运行良好。

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 1

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

动作路径和动作旋转在safari中不起作用

1 个答案: