0
如果看一下下面的图片，我有两个动画正在运行：外环缓慢顺时针旋转，内环逆时针旋转。它在Chrome中效果很好，但在Safari中，动画滞后并且不如Chrome中那么流畅。任何想法，为什么它在Safari中滞后？SVG旋转动画滞后
body.home {
background-image: url('http://uploadpie.com/5Fy2h');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
min-height: 800px;
}
////////////////////
//LOGO ANIMATIONS//
///////////////////
svg {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
z-index: -1;
}
svg mask rect {
fill: rgba(255, 255, 255, 0.8);
}
svg > rect {
fill: white;
}
#mask {
position: relative;
right: 250px;
}
.last-overlay {
fill: rgba(255, 255, 255, 0.5);
}
.first-ring-path {
transform-origin: 50% 50%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 90s;
-moz-animation-duration: 90s;
-ms-animation-duration: 90s;
-o-animation-duration: 90s;
animation-duration: 90s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
-webkit-transform: translateZ(0);
}
}
@-moz-keyframes rotate {
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes rotate {
100% {
-o-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
100% {
-ms-transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
.second-ring-path {
transform-origin: 50% 50%;
-webkit-animation-name: rotate-counter;
-moz-animation-name: rotate-counter;
-ms-animation-name: rotate-counter;
-o-animation-name: rotate-counter;
animation-name: rotate-counter;
-webkit-animation-duration: 90s;
-moz-animation-duration: 90s;
-ms-animation-duration: 90s;
-o-animation-duration: 90s;
animation-duration: 90s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes rotate-counter {
100% {
-webkit-transform: rotate(-360deg);
}
}
@-moz-keyframes rotate-counter {
100% {
-moz-transform: rotate(-360deg);
}
}
@-o-keyframes rotate-counter {
100% {
-o-transform: rotate(-360deg);
}
}
@-ms-keyframes rotate-counter {
100% {
-ms-transform: rotate(-360deg);
}
}
@keyframes rotate-counter {
100% {
transform: rotate(-360deg);
}
}<body class="home">
<!-- LOGO ANIMATION -->
<svg id="logo-svg" preserveAspectRatio="xMidYMid slice">
<svg version="1.1" id="logo-animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" xml:space="preserve">
<rect class="last-overlay" x="0" y="0" width="100%" height="100%" />
<mask id="mask" maskUnits="userSpaceOnUse">
<rect x="0" y="0" width="100%" height="100%" />
<svg x="-45%" y="5%" class="logo-animation-container">
<svg class="svg-path" version="1.1" baseProfile="tiny" class="first-ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 270" xml:space="preserve">
<g id="pathRotate" class="first-ring-path">
<g>
<g>
<path d="M118.4,237.5c-8.5,0-16.9-0.9-25.1-2.7c-2.8-0.6-4.6-3.4-3.9-6.2c0.6-2.8,3.4-4.5,6.2-3.9
c7.5,1.6,15.2,2.5,22.9,2.5c20.7,0,40.7-6,58-17.3c2.4-1.6,5.6-0.9,7.2,1.5c1.6,2.4,0.9,5.6-1.5,7.2
C163.1,230.9,141.1,237.5,118.4,237.5z" />
</g>
<g>
<path d="M192.5,209.2c-1.4,0-2.8-0.6-3.9-1.7c-1.9-2.1-1.7-5.4,0.4-7.3c3.9-3.5,7.5-7.3,10.9-11.3
c1.8-2.2,5.1-2.5,7.3-0.7s2.5,5.1,0.7,7.3c-3.6,4.4-7.7,8.6-11.9,12.4C195,208.7,193.7,209.2,192.5,209.2z" />
</g>
<g>
<path d="M214.6,181.9c-0.9,0-1.8-0.2-2.6-0.7c-2.5-1.4-3.3-4.6-1.9-7.1c9.3-16,14.1-34.3,14.1-52.9
c0-4.9-0.3-9.8-1-14.5c-0.4-2.8,1.6-5.4,4.4-5.8c2.8-0.4,5.4,1.6,5.8,4.4c0.7,5.2,1.1,10.6,1.1,15.9c0,20.4-5.4,40.5-15.5,58.1
C218.1,181,216.4,181.9,214.6,181.9z" />
</g>
<g>
<path d="M224.7,94.1c-2.2,0-4.3-1.4-4.9-3.7c-2.3-7.7-5.6-15.1-9.6-22.1c-1.4-2.5-0.6-5.6,1.9-7.1
c2.5-1.4,5.6-0.6,7.1,1.9c4.4,7.7,8,15.8,10.5,24.2c0.8,2.7-0.7,5.6-3.4,6.4C225.7,94,225.2,94.1,224.7,94.1z" />
</g>
<g>
<path d="M206.4,58.7c-1.5,0-3.1-0.7-4.1-2c-10.9-14.2-25.3-25.4-41.7-32.5c-2.6-1.1-3.8-4.2-2.7-6.8
s4.2-3.8,6.8-2.7c17.9,7.8,33.7,20.2,45.7,35.7c1.7,2.3,1.3,5.5-0.9,7.2C208.6,58.3,207.5,58.7,206.4,58.7z" />
</g>
<g>
<path d="M41,46.7c-1.3,0-2.7-0.5-3.7-1.6c-2-2-1.9-5.3,0.1-7.3C59.2,16.6,88,5,118.4,5c1.6,0,3.2,0,4.7,0.1
c2.9,0.1,5.1,2.5,5,5.4c-0.1,2.9-2.5,5.1-5.4,5c-1.4-0.1-2.9-0.1-4.3-0.1c-27.7,0-53.9,10.6-73.7,29.9
C43.6,46.2,42.3,46.7,41,46.7z" />
</g>
<g>
<path d="M7.5,119c-0.1,0-0.2,0-0.4,0c-2.8-0.2-5-2.7-4.8-5.5c0.3-4,0.8-8.1,1.5-12.1C6,88.3,10.5,75.7,17,64.2
c1.4-2.5,4.6-3.4,7-2c2.5,1.4,3.4,4.6,2,7c-5.9,10.5-10,21.9-12.1,33.9c-0.6,3.6-1.1,7.4-1.3,11C12.4,116.9,10.2,119,7.5,119z" />
</g>
<g>
<path d="M58.6,220c-1,0-1.9-0.3-2.8-0.8c-26.2-16.7-44.8-43.7-51.2-74c-0.6-2.8,1.2-5.5,4-6.1s5.5,1.2,6.1,4
c5.8,27.6,22.8,52.1,46.6,67.4c2.4,1.5,3.1,4.7,1.6,7.1C61.9,219.2,60.3,220,58.6,220z" />
</g>
</g>
</g>
</svg>
<svg class="svg-path" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 270 270" xml:space="preserve">
<g class="second-ring-path">
<g>
<g>
<path d="M31.9,147.9c-2.5,0-4.8-1.7-5.4-4.3c-1.8-7.3-2.7-14.8-2.7-22.3c0-7.8,1-15.5,2.8-23c0.8-3,3.8-4.8,6.8-4
\t \t \t \t c3,0.8,4.8,3.8,4,6.8c-1.7,6.6-2.5,13.4-2.5,20.3c0,6.6,0.8,13.3,2.3,19.7c0.7,3-1.1,6-4.1,6.7C32.8,147.8,32.4,147.9,31.9,147.9
\t \t \t \t z" />
</g>
<g>
<path d="M117.7,215.2c-29.9,0-57.4-13.8-75.3-37.8c-1.8-2.5-1.3-6,1.1-7.8c2.5-1.8,6-1.3,7.8,1.1
\t \t \t \t c15.8,21.2,40,33.3,66.4,33.3c6,0,12-0.6,17.8-1.9c3-0.7,6,1.2,6.7,4.3c0.7,3-1.2,6-4.3,6.7C131.4,214.5,124.6,215.2,117.7,215.2
\t \t \t \t z" />
</g>
<g>
<path d="M154.4,207.3c-2.1,0-4.1-1.2-5.1-3.3c-1.3-2.8,0-6.1,2.8-7.4c23.5-10.7,40.9-32.2,46.5-57.4
\t \t \t \t c0.7-3,3.6-4.9,6.7-4.2c3,0.7,4.9,3.6,4.2,6.7c-6.3,28.6-26,53-52.8,65.2C156,207.1,155.2,207.3,154.4,207.3z" />
</g>
<g>
<path d="M206.1,126.9c-3.1,0-5.6-2.5-5.6-5.6c0-14.2-3.7-28.3-10.6-40.6c-1.5-2.7-0.6-6.1,2.1-7.6
\t \t \t \t c2.7-1.5,6.1-0.6,7.6,2.1c7.9,14,12.1,29.9,12.1,46.1C211.7,124.4,209.2,126.9,206.1,126.9z" />
</g>
<g>
<path d="M185.2,69.8c-1.6,0-3.2-0.7-4.3-2c-9.7-11.5-22.4-20.1-36.5-24.9c-2.9-1-4.5-4.2-3.5-7.1
\t \t \t \t c1-2.9,4.2-4.5,7.1-3.5c16.1,5.5,30.4,15.2,41.4,28.3c2,2.4,1.7,5.9-0.7,7.9C187.7,69.4,186.4,69.8,185.2,69.8z" />
</g>
<g>
<path d="M45.9,75.3c-1.1,0-2.3-0.3-3.2-1c-2.5-1.8-3.1-5.3-1.3-7.8c11.4-15.9,27.2-27.7,45.8-34.1
\t \t \t \t c4.4-1.5,8.9-2.7,13.4-3.5c3-0.6,6,1.4,6.5,4.5c0.6,3-1.4,6-4.5,6.5c-4,0.7-7.9,1.8-11.8,3.1c-16.4,5.6-30.3,16-40.3,30
\t \t \t \t C49.4,74.5,47.7,75.3,45.9,75.3z" />
</g>
</g>
</g>
</svg>
<svg class="svg-path" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 270 270" xml:space="preserve">
<g>
<g>
<path d="M116.8,50.7c-39.3,0-71.3,32-71.3,71.3c0,39.3,32,71.3,71.3,71.3c39.3,0,71.3-32,71.3-71.3
\t \t \t C188,82.7,156.1,50.7,116.8,50.7z M138.5,122c0,34.5-11.5,60.3-21.8,60.3c-10.3,0-21.8-25.8-21.8-60.3c0-34.5,11.5-60.3,21.8-60.3
\t \t \t C127,61.7,138.5,87.5,138.5,122z M56.5,122c0-26.1,16.7-48.4,40-56.8C88.8,78,84,98.3,84,122c0,23.7,4.8,44,12.5,56.8
\t \t \t C73.2,170.4,56.5,148.1,56.5,122z M137,178.8c7.7-12.8,12.5-33,12.5-56.8c0-23.7-4.8-44-12.5-56.8c23.3,8.3,40,30.6,40,56.8
\t \t \t C177,148.1,160.3,170.4,137,178.8z" />
</g>
</g>
</svg>
</svg>
<!-- /logo-animation-container -->
</mask>
< </svg>
<rect id="rect" mask="url(#mask)" x="0" y="0" width="100%" height="100%" />
</svg>
</body>