【发布时间】:2016-02-26 18:11:28
【问题描述】:
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">
【问题讨论】:
标签: css svg safari cross-browser mobile-safari