【发布时间】：2019-04-07 05:07:13
【问题描述】：
我用 css 动画制作了一个 SVG 动画。动画在电脑上很流畅，但在Android智能手机上绝对不流畅:(
遗憾的是，我没有在智能手机上找到太多关于 svg 平滑度的信息：X
我尝试了 will-change、translate3d 和 steps，但没有任何效果，也没有改变任何东西。
*{
padding:0;
margin:0;
}
body{
background-color: #161616;
}
#stroke_small{
animation-name: s_small;
animation-duration: .5s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
transform-origin: center;
will-change: transform,opacity,rotate;
transform:translate3d(0,0,0);
}
#stroke_big{
animation-name: s_big;
animation-duration: .6s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
transform-origin: center;
will-change: transform,opacity,rotate;
transform:translate3d(0,0,0);
}
@keyframes s_small {
0%{
transform: scale(0) rotate(90deg);
opacity:0;
}
95%{
transform: scale(1.2) rotate(90deg);
}
100%{
transform: scale(1) rotate(90deg);
opacity: 1;
}
}
@keyframes s_big {
0%{
transform: scale(0);
opacity: 0;
}
80%{
transform: scale(1.4);
opacity: 0.3;
}
100%{
transform: scale(1);
opacity: 1;
}
}
#wrap{
height: 500px;
transform: translate(0,50%);
}
svg{
height: 100%;
width: 100%;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="wrap">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 150 150" width="150" height="150">
<defs>
<clipPath id="_clipPath_LSwlYo9f2BqiKFIU9xti0kwRpXdFVREV"><rect width="150" height="150"/></clipPath>
</defs>
<g clip-path="url(#_clipPath_LSwlYo9f2BqiKFIU9xti0kwRpXdFVREV)">
<defs>
<filter id="Wak5toas1V39NqTVjCKE95NQoDAjvIxm" x="-200%" y="-200%" width="400%" height="400%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" stdDeviation="4.293609062839028"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_100_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="1"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_100_offsetBlur" operator="in" result="pf_100_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="pf_100_dropShadow" mode="normal" result="_out_rCE9DJXr10m2lurUI4sPvRW8P2VjDGfr"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="_out_rCE9DJXr10m2lurUI4sPvRW8P2VjDGfr" stdDeviation="2.146804531419514"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_101_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="1"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_101_offsetBlur" operator="in" result="pf_101_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="_out_rCE9DJXr10m2lurUI4sPvRW8P2VjDGfr" in2="pf_101_dropShadow" mode="normal" result="_out_vkz613rCnMiUq3TGHYc6YN9ZfsLARbBU"/>
<feMerge><feMergeNode in="_out_vkz613rCnMiUq3TGHYc6YN9ZfsLARbBU"/></feMerge>
</filter>
</defs>
<g filter="url(#Wak5toas1V39NqTVjCKE95NQoDAjvIxm)"><circle cx="75" cy="75" r="57" id="stroke_big" fill="transparent" stroke-width="14" stroke-dasharray="1,34" stroke="rgb(255,255,255)" stroke-linejoin="bevel" stroke-linecap="butt" stroke-miterlimit="3"/><circle vector-effect="non-scaling-stroke" cx="75" cy="75" r="50" id="stroke_big" fill="none"/></g>
<defs>
<filter id="kApXcD8xa6moYJmMIkGqbyC7guWaEPtb" x="-200%" y="-200%" width="400%" height="400%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" stdDeviation="4.293609062839028"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_100_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="1"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_100_offsetBlur" operator="in" result="pf_100_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="pf_100_dropShadow" mode="normal" result="_out_q38EKtVito3vTzoYDgDggO89qEmheCPw"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="_out_q38EKtVito3vTzoYDgDggO89qEmheCPw" stdDeviation="2.146804531419514"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_101_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="1"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_101_offsetBlur" operator="in" result="pf_101_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="_out_q38EKtVito3vTzoYDgDggO89qEmheCPw" in2="pf_101_dropShadow" mode="normal" result="_out_rltGqyg0cPUUeAoL2XaPyexknaV3NvJI"/>
<feMerge><feMergeNode in="_out_rltGqyg0cPUUeAoL2XaPyexknaV3NvJI"/></feMerge>
</filter>
</defs>
<g filter="url(#kApXcD8xa6moYJmMIkGqbyC7guWaEPtb)"><circle cx="75" cy="75" r="52" id="stroke_small" fill="transparent" stroke-width="4" stroke-dasharray="1,62" stroke="rgb(255,255,255)" stroke-linejoin="bevel" stroke-linecap="butt" stroke-miterlimit="3"/><circle vector-effect="non-scaling-stroke" cx="75" cy="75" r="50" id="stroke_small" fill="none"/></g>
</g>
</svg>
</div>
</body>
</html>【问题讨论】：
标签： html css svg css-animations