【发布时间】：2018-07-03 21:24:48
【问题描述】：
我正在尝试使用 CSS 动画在屏幕上为另一个 SVG 图像上的一个 SVG 图像设置动画。我真的接近让它像我想要的那样工作，但出于某种奇怪的原因，它在 Chrome 中很奇怪。它不像在 FF 或 Safari 中那样在屏幕上移动 100%，而是在屏幕上（缓慢地）移动到大约 25%。我做错了什么？
JSFiddle：https://jsfiddle.net/byk397ao/2/
#container {
max-width: 100%;
}
.svg-container {
width: 100%;
height: auto;
border: 1px solid green;
}
@keyframes truck-drive {
0% {transform: translateX(0); }
25% {transform: translateX(25%); }
75% {transform: translateX(75%); }
100% {transform: translateX(100%);}
}
.truck-drive {animation: truck-drive 5s linear 1;}<div id="container">
<div class="svg-container">
<svg class="svg" version="1.1" 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 1200 150" style="enable-background:new 0 0 1200 150;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6D6D6D;}
.st1{fill:#FFFFFF;}
.st2{fill:none;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#231F20;}
</style>
<g id="road">
<g>
<rect x="0.5" y="86.5" class="st0" width="1199" height="27"/>
<path d="M1199,87v26H1V87H1199 M1200,86H0v28h1200V86L1200,86z"/>
</g>
<g>
<line class="st1" x1="-0.5" y1="99.5" x2="1199.5" y2="99.5"/>
<g>
<g>
<g>
<g>
<g>
<rect x="-0.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="19.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="10.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="26.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="45.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="37" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="28.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="52.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="72.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="63.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="54.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="79.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="99.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="90.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="81.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="106.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="125.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="117" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="108.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="132.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="152.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="143.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="134.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="159.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="179.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="170.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="161.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="186.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="205.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="197" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="188.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="212.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="232.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="223.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="214.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="239.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="259.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="250.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="241.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="266.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="285.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="277" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="268.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="292.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="312.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="303.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="294.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="319.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="339.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="330.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="321.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="346.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="365.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="357" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="348.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="372.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="392.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="383.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="374.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="399.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="419.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="410.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="401.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="426.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="445.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="437" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="428.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="452.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="472.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="463.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="454.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="479.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="499.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="490.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="481.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="506.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="525.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="517" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="508.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="532.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="552.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="543.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="534.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="559.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="579.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="570.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="561.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="586.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="605.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="597" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="588.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="612.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="632.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="623.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="614.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="639.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="659.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="650.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="641.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="666.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="685.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="677" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="668.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="692.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="712.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="703.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="694.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="719.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="739.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="730.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="721.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="746.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="765.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="757" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="748.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="772.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="792.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="783.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="774.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="799.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="819.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="810.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="801.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="826.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="845.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="837" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="828.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="852.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="872.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="863.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="854.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="879.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="899.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="890.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="881.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="906.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="925.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="917" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="908.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="932.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="952.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="943.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="934.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="959.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="979.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="970.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="961.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="986.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="1005.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="997" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="988.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="1012.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="1032.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1023.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1014.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="1039.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="1059.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1050.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1041.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="1066.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="1085.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1077" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1068.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="1092.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="1112.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1103.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1094.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="1119.5" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="1139.2" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1130.4" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1121.5" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="1146.2" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="1165.9" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1157" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1148.2" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
<g>
<g>
<g>
<rect x="1172.8" y="84.5" class="st2" width="26.7" height="30"/>
</g>
<rect x="1192.6" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1183.7" y="98.4" class="st3" width="4.9" height="3"/>
<rect x="1174.9" y="98.4" class="st3" width="4.9" height="3"/>
</g>
</g>
</g>
</g>
</g>
</g>
<svg class="svg truck">
<g class="truck-drive">
<path d="M15,38h56.8v55.5H40.4l-0.1-4.3c0-3.3-1.1-6.2-3.4-8.6c-2.2-2.4-4.9-3.6-8.1-3.6c-3.2,0-5.9,1.2-8.1,3.6s-3.4,5.2-3.4,8.6
v4.3H15V38z M22.1,82.6c1.9-2,4.1-2.9,6.7-2.9c2.6,0,4.9,1,6.7,2.9c1.9,2,2.8,4.3,2.8,7.1s-0.9,5.1-2.8,7.1c-1.9,2-4.1,2.9-6.7,2.9
c-2.6,0-4.8-1-6.7-2.9c-1.9-2-2.8-4.3-2.8-7.1S20.2,84.6,22.1,82.6z M35.6,66.6v10.3h14.5V66.6h10.3V52.1H50.1V41.9H35.6v10.2H25.4
v14.5H35.6z M59.1,30.5h4.4l1.4,6.3h-6.9L59.1,30.5z M73.6,47.7h9.9c1.8,0,3.1,0.8,3.8,2.5l5.1,12.4h2c3.5,0,5.3,1.4,5.3,4.1v26.7
h-5.1v-4.3c0-3.3-1.1-6.2-3.4-8.6C89,78.2,86.3,77,83.1,77c-4.2,0-7.3,2-9.5,6.1V47.7z M76.4,82.6c1.9-2,4.1-2.9,6.7-2.9
c2.6,0,4.9,1,6.7,2.9c1.9,2,2.8,4.3,2.8,7.1s-0.9,5.1-2.8,7.1c-1.9,2-4.1,2.9-6.7,2.9c-2.6,0-4.9-1-6.7-2.9c-1.9-2-2.8-4.3-2.8-7.1
S74.5,84.6,76.4,82.6z M90.3,62.6l-4.7-12.2H75.3v12.2H90.3z"/>
</g>
</svg>
</svg>
</div>
</div>【问题讨论】：
标签： css google-chrome animation svg css-animations