運動路徑和動作旋轉在Safari中不起作用

Question

motion-path和motion-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">

Answer 1

http://caniuse.com/#feat=css-motion-paths 顯示，目前支持CSS運動路徑的瀏覽器：Chrome和Opera。