How can I rotate a svg group and keep its relative position?
0
I'm trying to use css to animate a simple SVG dump truck. The truck should raise and lower its bed.
To do this, I added a class to the <g> tag that contains the truck bed, and then added a css animation that targets this group. The bed is in the correct position, but as soon as I style it with the transform attribute its positioning is screwed up.
I've tried playing around with transform-box and transform-origin, since most other answers recommend using these, but I haven't been able to fix it that way.
How can I fix this to rotate the bed and keep it level with the body of the truck?
You can see it here: https://codepen.io/berlinquin/pen/VVWmNr
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg);
}
60% {
transform: rotate(-20deg);
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/* animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>css svg css-animations
edited Nov 16 at 0:46
Temani Afif
64.8k93675
asked Nov 16 at 0:23
quinten
3026
add a comment |
0
I'm trying to use css to animate a simple SVG dump truck. The truck should raise and lower its bed.
To do this, I added a class to the <g> tag that contains the truck bed, and then added a css animation that targets this group. The bed is in the correct position, but as soon as I style it with the transform attribute its positioning is screwed up.
I've tried playing around with transform-box and transform-origin, since most other answers recommend using these, but I haven't been able to fix it that way.
How can I fix this to rotate the bed and keep it level with the body of the truck?
You can see it here: https://codepen.io/berlinquin/pen/VVWmNr
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg);
}
60% {
transform: rotate(-20deg);
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/* animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>css svg css-animations
edited Nov 16 at 0:46
Temani Afif
64.8k93675
asked Nov 16 at 0:23
quinten
3026
add a comment |
0
0
0
I'm trying to use css to animate a simple SVG dump truck. The truck should raise and lower its bed.
To do this, I added a class to the <g> tag that contains the truck bed, and then added a css animation that targets this group. The bed is in the correct position, but as soon as I style it with the transform attribute its positioning is screwed up.
I've tried playing around with transform-box and transform-origin, since most other answers recommend using these, but I haven't been able to fix it that way.
How can I fix this to rotate the bed and keep it level with the body of the truck?
You can see it here: https://codepen.io/berlinquin/pen/VVWmNr
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg);
}
60% {
transform: rotate(-20deg);
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/* animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>css svg css-animations
edited Nov 16 at 0:46
Temani Afif
64.8k93675
asked Nov 16 at 0:23
quinten
3026
I'm trying to use css to animate a simple SVG dump truck. The truck should raise and lower its bed.
To do this, I added a class to the <g> tag that contains the truck bed, and then added a css animation that targets this group. The bed is in the correct position, but as soon as I style it with the transform attribute its positioning is screwed up.
I've tried playing around with transform-box and transform-origin, since most other answers recommend using these, but I haven't been able to fix it that way.
How can I fix this to rotate the bed and keep it level with the body of the truck?
You can see it here: https://codepen.io/berlinquin/pen/VVWmNr
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg);
}
60% {
transform: rotate(-20deg);
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/* animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg);
}
60% {
transform: rotate(-20deg);
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/* animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg);
}
60% {
transform: rotate(-20deg);
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/* animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>css svg css-animations
css svg css-animations
edited Nov 16 at 0:46
Temani Afif
64.8k93675
asked Nov 16 at 0:23
quinten
3026
edited Nov 16 at 0:46
Temani Afif
64.8k93675
asked Nov 16 at 0:23
quinten
3026
edited Nov 16 at 0:46
Temani Afif
64.8k93675
edited Nov 16 at 0:46
Temani Afif
64.8k93675
edited Nov 16 at 0:46
Temani Afif
64.8k93675
64.8k93675
asked Nov 16 at 0:23
quinten
3026
asked Nov 16 at 0:23
quinten
3026
asked Nov 16 at 0:23
quinten
3026
3026
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
There is a translation that you are overridden with the new transform, you should include it within the animation:
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: translate(-9.8677083px,-119.84723px);
}
40% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
60% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
100% {
transform: translate(-9.8677083px,-119.84723px)
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>Or consider another g element where you apply the rotation and no need to include the translation within the animation:
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg) ;
}
60% {
transform: rotate(-20deg) ;
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g class="truck-bed"><g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g></g>
</svg>
</div>
</div>answered Nov 16 at 0:42
Temani Afif
64.8k93675
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53329714%2fhow-can-i-rotate-a-svg-group-and-keep-its-relative-position%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
There is a translation that you are overridden with the new transform, you should include it within the animation:
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: translate(-9.8677083px,-119.84723px);
}
40% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
60% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
100% {
transform: translate(-9.8677083px,-119.84723px)
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>Or consider another g element where you apply the rotation and no need to include the translation within the animation:
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg) ;
}
60% {
transform: rotate(-20deg) ;
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g class="truck-bed"><g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g></g>
</svg>
</div>
</div>answered Nov 16 at 0:42
Temani Afif
64.8k93675
add a comment |
2
There is a translation that you are overridden with the new transform, you should include it within the animation:
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: translate(-9.8677083px,-119.84723px);
}
40% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
60% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
100% {
transform: translate(-9.8677083px,-119.84723px)
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>Or consider another g element where you apply the rotation and no need to include the translation within the animation:
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg) ;
}
60% {
transform: rotate(-20deg) ;
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g class="truck-bed"><g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g></g>
</svg>
</div>
</div>answered Nov 16 at 0:42
Temani Afif
64.8k93675
add a comment |
2
2
2
There is a translation that you are overridden with the new transform, you should include it within the animation:
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: translate(-9.8677083px,-119.84723px);
}
40% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
60% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
100% {
transform: translate(-9.8677083px,-119.84723px)
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>Or consider another g element where you apply the rotation and no need to include the translation within the animation:
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg) ;
}
60% {
transform: rotate(-20deg) ;
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g class="truck-bed"><g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g></g>
</svg>
</div>
</div>answered Nov 16 at 0:42
Temani Afif
64.8k93675
There is a translation that you are overridden with the new transform, you should include it within the animation:
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: translate(-9.8677083px,-119.84723px);
}
40% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
60% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
100% {
transform: translate(-9.8677083px,-119.84723px)
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>Or consider another g element where you apply the rotation and no need to include the translation within the animation:
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg) ;
}
60% {
transform: rotate(-20deg) ;
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g class="truck-bed"><g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g></g>
</svg>
</div>
</div>@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: translate(-9.8677083px,-119.84723px);
}
40% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
60% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
100% {
transform: translate(-9.8677083px,-119.84723px)
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: translate(-9.8677083px,-119.84723px);
}
40% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
60% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
100% {
transform: translate(-9.8677083px,-119.84723px)
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg) ;
}
60% {
transform: rotate(-20deg) ;
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g class="truck-bed"><g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g></g>
</svg>
</div>
</div>@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg) ;
}
60% {
transform: rotate(-20deg) ;
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g class="truck-bed"><g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g></g>
</svg>
</div>
</div>answered Nov 16 at 0:42
Temani Afif
64.8k93675
answered Nov 16 at 0:42
Temani Afif
64.8k93675
answered Nov 16 at 0:42
Temani Afif
64.8k93675
answered Nov 16 at 0:42
Temani Afif
64.8k93675
64.8k93675
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53329714%2fhow-can-i-rotate-a-svg-group-and-keep-its-relative-position%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
