SVG Animation Explanation

SVG Animation Explanation - css

I am having trouble figuring out why this svg animation from codepen works. For the animation that moves the sprinkles left to right, it keeps setting the animation back to the original state. The question I have here is why does the translateX property only go to 154.5px.
I forked this from a codepen I saw by the way. Anyway, I am completely confused how they came up with this number. What math is needed to get this number?
body {
background-color: #000;
}
.center {
text-align: center;
}
#Circle{
display:none
}
#keyframes bottommotion {
0% {transform: rotate(0deg)}
14% {transform: rotate(10deg)}
29% {transform: rotate(-10deg)}
45% {transform: rotate(0deg)}
55% {transform: translate(0px, 38px)}
88% {transform: translate(0px, 0px)}
}
#Bottom {
transform-origin: 50% 50%;
animation-timing-function: cubic;
animation-name: bottommotion;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
#keyframes topmotion {
0% {transform: rotate(0deg)}
23% {transform: rotate(10deg)}
38% {transform: rotate(-10deg)}
45% {transform: rotate(0deg)}
55% {transform: translate(0px, -54px)}
100% {transform: translate(0px, 0px)}
}
#Top {
transform-origin: 50% 50%;
animation-timing-function: cubic;
animation-name: topmotion;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
#keyframes spotmotion {
0% {transform: translate(0px,0px)}
100% {transform: translate(154.5px,0px)}
}
#Spots {
transform-origin: 50% 50%;
animation-timing-function: linear;
animation-name: spotmotion;
animation-duration: .23s;
animation-iteration-count: infinite;
}
#keyframes shadowmotion {
0% {opacity:0.75; transform:translate(0px, 0px)}
45% {opacity:0.75; transform:translate(0px, 0px)}
55% {opacity:0.95; transform:translate(0px, -6px)}
95% {opacity:0.75; transform:translate(0px, 0px)}
100% {opacity:0.75; transform:translate(0px, 0px)}
}
#Shadow {
transform-origin: 50% 50%;
animation-timing-function: cubic;
animation-name: shadowmotion;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
<div class="center"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="505.821px" height="325.822px" viewBox="0 0 505.821 325.822" enable-background="new 0 0 505.821 325.822"
xml:space="preserve">
<g id="Background">
<rect width="505.821" height="325.822"/>
</g>
<g id="Spots">
<g>
<path fill="#00192a" d="M-146.92,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-143.521,273.137-145.042,271.615-146.92,271.615z"/>
<path fill="#00192a" d="M9.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4H9.08
c1.878,0,3.399-1.521,3.399-3.4C12.479,273.137,10.958,271.615,9.08,271.615z"/>
<path fill="#00192a" d="M165.08,271.615H95.505c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C168.479,273.137,166.958,271.615,165.08,271.615z"/>
<path fill="#00192a" d="M321.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C324.479,273.137,322.958,271.615,321.08,271.615z"/>
<path fill="#00192a" d="M477.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C480.479,273.137,478.958,271.615,477.08,271.615z"/>
<path fill="#00192a" d="M633.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C636.479,273.137,634.958,271.615,633.08,271.615z"/>
<path fill="#00192a" d="M789.08,271.615h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C792.479,273.137,790.958,271.615,789.08,271.615z"/>
</g>
<g>
<path fill="#00192a" d="M-195.406,198.945h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-192.006,200.467-193.528,198.945-195.406,198.945z"/>
<path fill="#00192a" d="M-39.406,198.945h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-36.006,200.467-37.528,198.945-39.406,198.945z"/>
<path fill="#00192a" d="M116.594,198.945H47.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C119.994,200.467,118.472,198.945,116.594,198.945z"/>
<path fill="#00192a" d="M272.594,198.945H203.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C275.994,200.467,274.472,198.945,272.594,198.945z"/>
<path fill="#00192a" d="M428.594,198.945H359.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C431.994,200.467,430.472,198.945,428.594,198.945z"/>
<path fill="#00192a" d="M584.594,198.945H515.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C587.994,200.467,586.472,198.945,584.594,198.945z"/>
<path fill="#00192a" d="M740.594,198.945H671.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C743.994,200.467,742.472,198.945,740.594,198.945z"/>
</g>
<g>
<path fill="#00192a" d="M-146.92,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-143.521,121.549-145.042,120.026-146.92,120.026z"/>
<path fill="#00192a" d="M9.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4H9.08
c1.878,0,3.399-1.521,3.399-3.4C12.479,121.549,10.958,120.026,9.08,120.026z"/>
<path fill="#00192a" d="M165.08,120.026H95.505c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C168.479,121.549,166.958,120.026,165.08,120.026z"/>
<path fill="#00192a" d="M321.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C324.479,121.549,322.958,120.026,321.08,120.026z"/>
<path fill="#00192a" d="M477.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C480.479,121.549,478.958,120.026,477.08,120.026z"/>
<path fill="#00192a" d="M633.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C636.479,121.549,634.958,120.026,633.08,120.026z"/>
<path fill="#00192a" d="M789.08,120.026h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C792.479,121.549,790.958,120.026,789.08,120.026z"/>
</g>
<g>
<path fill="#00192a" d="M-195.406,52.356h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-192.006,53.879-193.528,52.356-195.406,52.356z"/>
<path fill="#00192a" d="M-39.406,52.356h-69.574c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C-36.006,53.879-37.528,52.356-39.406,52.356z"/>
<path fill="#00192a" d="M116.594,52.356H47.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C119.994,53.879,118.472,52.356,116.594,52.356z"/>
<path fill="#00192a" d="M272.594,52.356H203.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C275.994,53.879,274.472,52.356,272.594,52.356z"/>
<path fill="#00192a" d="M428.594,52.356H359.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C431.994,53.879,430.472,52.356,428.594,52.356z"/>
<path fill="#00192a" d="M584.594,52.356H515.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C587.994,53.879,586.472,52.356,584.594,52.356z"/>
<path fill="#00192a" d="M740.594,52.356H671.02c-1.877,0-3.4,1.522-3.4,3.399c0,1.879,1.523,3.4,3.4,3.4h69.574
c1.878,0,3.399-1.521,3.399-3.4C743.994,53.879,742.472,52.356,740.594,52.356z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-205.688,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-204.437,16.326-205.688,16.326z"/>
<path fill="#0090A5" d="M-49.688,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-48.437,16.326-49.688,16.326z"/>
<path fill="#0090A5" d="M106.312,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S107.563,16.326,106.312,16.326z"/>
<path fill="#0090A5" d="M262.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S263.563,16.326,262.311,16.326z"/>
<path fill="#0090A5" d="M418.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S419.563,16.326,418.311,16.326z"/>
<path fill="#0090A5" d="M574.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S575.563,16.326,574.311,16.326z"/>
<path fill="#0090A5" d="M730.311,16.326h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S731.563,16.326,730.311,16.326z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-278.269,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-277.017,85.058-278.269,85.058z"/>
<path fill="#0090A5" d="M-122.269,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-121.017,85.058-122.269,85.058z"/>
<path fill="#0090A5" d="M33.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S34.983,85.058,33.731,85.058z"/>
<path fill="#0090A5" d="M189.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S190.983,85.058,189.731,85.058z"/>
<path fill="#0090A5" d="M345.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S346.983,85.058,345.731,85.058z"/>
<path fill="#0090A5" d="M501.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S502.983,85.058,501.731,85.058z"/>
<path fill="#0090A5" d="M657.731,85.058h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S658.983,85.058,657.731,85.058z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-205.688,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-204.437,159.152-205.688,159.152z"/>
<path fill="#0090A5" d="M-49.688,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-48.437,159.152-49.688,159.152z"/>
<path fill="#0090A5" d="M106.312,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S107.563,159.152,106.312,159.152z"/>
<path fill="#0090A5" d="M262.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S263.563,159.152,262.311,159.152z"/>
<path fill="#0090A5" d="M418.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S419.563,159.152,418.311,159.152z"/>
<path fill="#0090A5" d="M574.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S575.563,159.152,574.311,159.152z"/>
<path fill="#0090A5" d="M730.311,159.152h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S731.563,159.152,730.311,159.152z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-205.688,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-204.437,301.978-205.688,301.978z"/>
<path fill="#0090A5" d="M-49.688,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-48.437,301.978-49.688,301.978z"/>
<path fill="#0090A5" d="M106.312,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S107.563,301.978,106.312,301.978z"/>
<path fill="#0090A5" d="M262.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S263.563,301.978,262.311,301.978z"/>
<path fill="#0090A5" d="M418.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S419.563,301.978,418.311,301.978z"/>
<path fill="#0090A5" d="M574.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S575.563,301.978,574.311,301.978z"/>
<path fill="#0090A5" d="M730.311,301.978h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S731.563,301.978,730.311,301.978z"/>
</g>
<g opacity="0.86">
<path fill="#0090A5" d="M-278.269,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-277.017,227.884-278.269,227.884z"/>
<path fill="#0090A5" d="M-122.269,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S-121.017,227.884-122.269,227.884z"/>
<path fill="#0090A5" d="M33.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.267-1.015,2.267-2.267S34.983,227.884,33.731,227.884z"/>
<path fill="#0090A5" d="M189.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.015,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S190.983,227.884,189.731,227.884z"/>
<path fill="#0090A5" d="M345.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S346.983,227.884,345.731,227.884z"/>
<path fill="#0090A5" d="M501.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S502.983,227.884,501.731,227.884z"/>
<path fill="#0090A5" d="M657.731,227.884h-24.8c-1.251,0-2.267,1.015-2.267,2.267s1.016,2.267,2.267,2.267h24.8
c1.252,0,2.268-1.015,2.268-2.267S658.983,227.884,657.731,227.884z"/>
</g>
</g>
<g id="Shadow">
<ellipse fill="#00243C" cx="252.403" cy="291.789" rx="68" ry="20"/>
</g>
<g id="Bottom">
<g>
<g>
<path fill="#60C29E" d="M177.332,156.984c0.001,50.103,33.611,90.72,75.071,90.72s75.068-40.617,75.069-90.72H177.332z"/>
<path fill="#87C65F" d="M252.402,156.984v90.72c0.001,0,0.001,0,0.001,0c41.46,0,75.068-40.617,75.069-90.72H252.402z"/>
<path fill="#38A479" d="M304.012,156.984H200.789c0,50.101,23.11,90.718,51.611,90.72c0,0,0.002,0,0.003,0
C280.91,247.703,304.012,207.087,304.012,156.984z"/>
<path fill="#32B44E" d="M252.401,156.984v90.72c0.001,0,0.001,0,0.002,0c28.507-0.002,51.609-40.617,51.609-90.72H252.401z"/>
<path fill="#00904C" d="M271.169,156.984h-37.536c0,50.103,8.404,90.718,18.769,90.72l0,0
C262.768,247.703,271.169,207.087,271.169,156.984z"/>
<ellipse fill="#006744" cx="252.403" cy="156.984" rx="75.071" ry="18.144"/>
<ellipse fill="#F69077" cx="252.403" cy="156.984" rx="60.808" ry="14.697"/>
<ellipse fill="#EF413C" cx="252.403" cy="156.984" rx="53.774" ry="12.996"/>
<path d="M217.479,156.382c2.512,2.117,2.337,6.792,2.299,6.825c-0.033,0.031-5.408,0.331-7.918-1.787
c-2.511-2.117-3.289-4.96-1.736-6.353C211.677,153.676,214.967,154.264,217.479,156.382z"/>
<path d="M237.369,154.375c1.364,2.8-0.894,7.048-0.942,7.066c-0.047,0.017-5.126-1.529-6.491-4.329
c-1.363-2.8-0.805-5.684,1.249-6.439C233.237,149.917,236.004,151.575,237.369,154.375z"/>
<path d="M257.023,154.546c0,3.04-3.982,6.188-4.036,6.186c-0.05,0-4.036-3.146-4.036-6.186c0-3.041,1.808-5.507,4.036-5.508
C255.216,149.04,257.023,151.504,257.023,154.546z"/>
<path d="M276.065,156.733c-1.363,2.8-6.441,4.348-6.489,4.329c-0.047-0.018-2.309-4.266-0.947-7.064
c1.366-2.802,4.135-4.459,6.188-3.704C276.869,151.049,277.427,153.931,276.065,156.733z"/>
<path d="M294.224,160.676c-2.509,2.117-7.88,1.819-7.916,1.786c-0.035-0.03-0.213-4.709,2.296-6.826
c2.513-2.116,5.808-2.704,7.358-1.312C297.515,155.715,296.737,158.56,294.224,160.676z"/>
</g>
<!-- <circle opacity="0" fill="#00A654" cx="252.402" cy="156.984" r="90.696"/> -->
</g>
</g>
<g id="Top">
<g>
<g>
<path fill="#60C29E" d="M252.403,175.152c41.46,0,75.069-8.123,75.069-18.144c0,0,0,0,0-0.001
c0-50.104-33.609-90.719-75.069-90.719s-75.071,40.615-75.071,90.719c0,0,0,0.001,0,0.001
C177.332,167.029,210.943,175.152,252.403,175.152z"/>
<path fill="#38A479" d="M252.403,175.152c19.724,0,37.659-1.841,51.058-4.848c0.361-4.34,0.552-8.779,0.552-13.297
c0-50.104-23.103-90.719-51.61-90.719c-28.502,0-51.613,40.615-51.613,90.719c0,4.518,0.191,8.956,0.554,13.297
C214.74,173.311,232.678,175.152,252.403,175.152z"/>
<path opacity="0.62" fill="#00A654" d="M252.403,175.152c6.354,0,12.52-0.192,18.413-0.551c0.23-5.692,0.354-11.574,0.354-17.594
c0-50.104-8.401-90.719-18.768-90.719c-10.364,0-18.769,40.615-18.769,90.719c0,6.02,0.123,11.9,0.354,17.594
C239.88,174.959,246.048,175.152,252.403,175.152z"/>
<path fill="#87C65F" d="M257.023,66.464v108.65c39.306-0.577,70.449-8.461,70.449-18.106c0,0,0,0,0-0.001
C327.472,108.779,296.33,69.349,257.023,66.464z"/>
<path fill="#32B44E" d="M252.403,175.152c19.724,0,37.659-1.841,51.058-4.848c0.361-4.34,0.552-8.779,0.552-13.297
c0-50.104-23.103-90.719-51.61-90.719L252.403,175.152C252.403,175.152,252.403,175.152,252.403,175.152z"/>
<path fill="#00904C" d="M252.403,175.152c6.354,0,12.52-0.192,18.413-0.551c0.23-5.692,0.354-11.574,0.354-17.594
c0-50.104-8.401-90.719-18.768-90.719c-10.364,0-18.769,40.615-18.769,90.719c0,6.02,0.123,11.9,0.354,17.594
C239.88,174.959,246.048,175.152,252.403,175.152z"/>
</g>
<!-- <circle opacity="0" fill="#00A654" cx="252.402" cy="156.984" r="90.696"/> -->
</g>
</g>
</svg>
</div>
http://codepen.io/Jesders88/pen/mOXVRK

If you look at the coordinates of the spots, or their bounding boxes, you can see that the horizontal distance between them is 156.
Why did the author go with 154.5 instead? Who knows. It may have been a mistake. More likely it was because they thought it looked better. If you used 156, you might get stuttering due to duplicate frames at the 0 and 156 offsets.
Try changing it to 156 and see whether you think it looks worse or not.

Related

moving svg circle using css animation

i'm trying to move svg circle using css animation on the whole dotted line cirlce, but the problem is when i use this code it start to move but not on all dotted circle line , any help?
#c1{
animation: moving 1s infinite linear;
/* motion-rotation: reverse; */
}
#-webkit-keyframes moving{
50% {transform: rotate(0.5deg)}
100% {transform: rotate(0.5deg)}
}
<svg id="eedf7e36-f7ba-41f3-811a-5462d78ed19b" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 910.88794 653.61419">
<rect y="646.47623" width="431.1819" height="1.87469" fill="#3f3d56"/>
<polygon points="109.607 639.942 121.866 639.942 127.699 592.654 109.605 592.654 109.607 639.942" fill="#ffb8b8"/>
<path d="M251.53582,759.63143h38.53073a0,0,0,0,1,0,0V774.5183a0,0,0,0,1,0,0H266.42267a14.88685,14.88685,0,0,1-14.88685-14.88685v0A0,0,0,0,1,251.53582,759.63143Z" transform="translate(397.08134 1410.94447) rotate(179.99738)" fill="#2f2e41"/><polygon points="44.379 637.585 56.532 639.205 68.564 593.103 50.629 590.712 44.379 637.585" fill="#ffb8b8"/><path d="M185.6415,759.43939h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H200.52836a14.88686,14.88686,0,0,1-14.88686-14.88686v0a0,0,0,0,1,0,0Z" transform="translate(162.1087 1430.92651) rotate(-172.40554)" fill="#2f2e41"/><polygon points="61.796 444.64 130.796 447.64 127.796 622.64 109.796 620.64 95.796 501.64 62.796 628.64 44.796 625.64 61.796 444.64" fill="#2f2e41"/><path d="M252.35236,463.83242l-24-4.90286-15,109.90286s44,29,58-1Z" transform="translate(-144.55603 -123.1929)" fill="#11067d"/><circle cx="97.32782" cy="303.17101" r="24.56103" fill="#ffb8b8"/><path d="M228.35236,457.83242l-35,11s17,85-11,129c0,0,35,37,50-46C232.35236,551.83242,244.35236,484.83242,228.35236,457.83242Z" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/><path d="M252.35236,463.83242l26,16s14,117,0,128S252.35236,463.83242,252.35236,463.83242Z" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/><path d="M289.1621,624.79959a10.0558,10.0558,0,0,1,.96818-15.3889l-10.57065-34.13562,17.83265,5.17981,7.30413,31.62164a10.11027,10.11027,0,0,1-15.53431,12.72307Z" transform="translate(-144.55603 -123.1929)" fill="#ffb8b8"/><path d="M199.338,614.92719a10.05577,10.05577,0,0,1-1.00976-15.38624l-14.85349-32.50158,18.349,2.85437,11.292,30.42646a10.11027,10.11027,0,0,1-13.77778,14.607Z" transform="translate(-144.55603 -123.1929)" fill="#ffb8b8"/><polygon points="57.796 346.64 48.796 345.64 25.796 420.64 48.796 472.64 66.796 461.64 46.796 418.64 62.796 372.64 57.796 346.64" fill="#2f2e41"/>
<polygon points="128.796 355.64 133.796 356.64 157.796 473.64 141.796 478.64 122.796 409.64 128.796 355.64" fill="#2f2e41"/><path d="M225.00655,436.44921a14.06316,14.06316,0,0,1,8.44415-11.03667c4.7277-1.93846,10.06074-1.11966,15.15695-.7489s10.76991.04877,14.44758-3.49856c3.3597-3.24064,4.11524-8.61848,2.49281-12.99537s-5.29609-7.775-9.46944-9.866a40.79142,40.79142,0,0,0-13.47062-3.56c-6.811-.82288-13.80511-.92776-20.44341.80412s-4.9267,5.44408-8.81681,11.095-5.05548,13.34984-2.08959,19.53611c1.98454,4.13936,5.54088,7.27259,9.004,10.28584" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/>
<path d="M774.394,707.49843l-.00049-1.87469c3.72742-.00092,7.51117-.07782,11.24732-.227l.07507,1.87286C781.95514,707.42061,778.14618,707.49752,774.394,707.49843Zm-11.31872-.21692c-3.74756-.14648-7.55005-.37072-11.30134-.66638l.1474-1.8692c3.727.29474,7.50434.51721,11.22718.66272Zm33.942-.6911-.14923-1.8692c3.72009-.29748,7.48511-.67553,11.18964-1.12317l.22522,1.86188c-3.72968.45032-7.51984.8302-11.26563,1.13043Zm-56.51025-1.093c-3.738-.44764-7.51026-.97583-11.213-1.56989l.29749-1.85089c3.67755.59039,7.42511,1.11493,11.13794,1.5589Zm78.98608-1.62024-.29932-1.85089c3.67664-.59412,7.399-1.27424,11.06379-2.01935l.37347,1.83624c-3.689.75153-7.43652,1.43536-11.13788,2.034Zm-101.33929-1.97083c-3.68946-.74695-7.4068-1.579-11.05005-2.47064l.4458-1.82159c3.619.887,7.31164,1.7127,10.97589,2.45416Zm123.525-2.54657-.44855-1.81976c3.63-.89343,7.2851-1.87195,10.8642-2.90906l.52179,1.80145C849.01239,697.47591,845.33258,698.46084,841.67883,699.35976Zm-145.51611-2.84045c-3.61487-1.04352-7.253-2.1731-10.81342-3.35761l.59223-1.77948c3.53656,1.17719,7.15051,2.29944,10.74109,3.33564ZM863.42511,693.061l-.59406-1.77771c3.53888-1.18267,7.10248-2.45416,10.59284-3.78051l.66638,1.752C870.57605,690.59035,866.98779,691.871,863.42511,693.061Zm-188.77344-3.70458c-3.51691-1.33283-7.05945-2.75715-10.52966-4.23548l.73462-1.72461c3.4469,1.46826,6.96606,2.88349,10.45965,4.20618Zm209.91052-4.32331-.736-1.72461c3.42718-1.46368,6.8681-3.01526,10.22668-4.61261l.80555,1.69348C891.477,681.99679,888.01227,683.55929,884.56219,685.0331ZM653.775,680.46352c-3.40521-1.61658-6.81915-3.32281-10.14654-5.07214l.87237-1.65869c3.305,1.73645,6.69556,3.43176,10.07788,5.03735Zm251.18836-5.13165-.8733-1.65869c3.30182-1.73743,6.60907-3.5636,9.82941-5.42639l.93921,1.62207c-3.24231,1.87561-6.57153,3.71368-9.89526,5.463Zm-271.265-5.41724c-3.267-1.88843-6.52991-3.86383-9.69849-5.87127l1.00324-1.58362c3.14709,1.99371,6.38849,3.9563,9.63348,5.83282Zm290.8313-5.90423-1.00323-1.58362c3.14251-1.991,6.29418-4.07709,9.36712-6.20172l1.06549,1.5415c-3.093,2.13928-6.26581,4.24-9.42932,6.24384ZM614.548,657.78853c-3.09991-2.142-6.19214-4.37188-9.19092-6.62829l1.12684-1.49756c2.97912,2.24084,6.05065,
4.45605,9.12957,6.58435Zm328.58582-6.64019-1.12763-1.49756c2.97223-2.23535,5.94818-4.56867,8.84534-6.93585l1.18634,1.45178c-2.9165,2.38275-5.91254,4.73163-8.904,6.98163Zm-346.69251-6.9798c-2.91046-2.37817-5.81268-4.84784-8.6261-7.34137l1.24311-1.40234c2.7951,2.47613,5.6781,4.93023,8.56933,7.29193Zm364.2157-7.33679-1.2431-1.40235c2.79285-2.47522,5.57373-5.041,8.265-7.62512l1.298,1.35291c-2.70856,2.60064-5.50782,5.18292-8.31983,7.67456ZM579.49121,629.149c-2.704-2.59784-5.3985-5.2909-8.00775-8.00409l1.35107-1.29987c2.59235,2.6958,5.26892,5.37146,7.95557,7.951Zm397.49444-7.99677-1.35113-1.29986c2.58411-2.68757,5.15179-5.46759,7.63245-8.2641l1.40234,1.24493C982.17218,615.64712,979.58722,618.44631,976.98565,621.15218Zm-413.18231-8.32263c-2.49945-2.81757-4.96869-5.71655-7.34-8.61652l1.45178-1.18634c2.35483,2.88074,4.808,5.7605,7.29056,8.55793Zm428.212-8.61835-1.45178-1.18634c2.369-2.8963,4.7069-5.87494,6.94958-8.85266L999.01068,595.3C996.75335,598.29781,994.399,601.29568,992.01532,604.2112Zm-442.5391-8.89752c-2.25915-2.99969-4.48767-6.08453-6.62326-9.17029l1.54151-1.06732c2.1214,3.06561,4.33481,6.13031,6.57931,9.10986Zm456.16825-9.20142-1.54151-1.06549c2.12915-3.07934,4.22174-6.23742,6.2182-9.38635l1.58362,1.00324C1009.89459,579.83364,1007.78833,583.01278,1005.64447,586.11226Zm-469.04029-9.3955c-2.00881-3.16724-3.98144-6.41956-5.86349-9.66736l1.62207-.93921c1.8692,3.22583,3.829,6.45618,5.82413,9.60236Zm481.17835-9.74793-1.62207-.93921c1.87653-3.24322,3.70819-6.56146,5.4447-9.86139l1.65869.87329c-1.74756,3.3219-3.592,6.66218-5.48138,9.92731ZM525.27316,557.155c-1.74655-3.31641-3.45007-6.71527-5.063-10.10217l1.69254-.80555c1.60238,3.364,3.29446,6.74,5.02911,10.03443Zm503.06821-10.25684-1.69348-.80554c1.60467-3.37591,3.16357-6.8324,4.63183-10.27423l1.72461.736C1031.526,540.01906,1029.957,543.49935,1028.34137,546.89815Zm-512.781-10.13788c-1.4765-3.45282-2.899-6.97522-4.22861-10.47015l1.752-.66638c1.32089,3.47021,2.73379,6.96973,4.20022,10.39874Zm521.68585-10.73468-1.753-.66455c1.3291-3.50683,2.60334-7.08142,3.7851-10.623l1.77771.59314C1039.867,518.89748,1038.58453,522.495,1037.24621,526.02559ZM507.52014,515.62777c-1.19366-3.5636-2.32965-7.20038-3.37637-10.80792l1.80053-.52179c1.03989,3.58282,2.16809,7.19488,3.35352,10.73468Zm536.90088-11.11-1.80145-.52c1.03436-3.57733,2.0111-7.23242,2.90362-10.8656l1.81976.44672C1046.44494,497.23678,1045.46179,500.91756,1044.421,504.51778Zm-543.212-10.634c-.90072-3.65057-1.73785-7.36609-2.48938-11.045l1.83719-.37531c.746,3.65424,1.57767,7.346,2.472,10.9718Zm548.6109-11.35168-1.83807-.37348c.74146-3.65149,1.41882-7.37433,2.01386-11.06421l1.85089.2984C1051.24792,475.10744,1050.566,478.855,1049.81994,482.53213ZM496.67972,471.70131c-.601-3.70092-1.13553-7.47229-1.58866-11.20977l1.861-.22522c.45038,3.71283.9813,7.45855,1.57859,11.1347Zm556.74319-11.52282-1.86188-.22339c.4458-3.711.822-7.47592,1.11676-11.1901l1.86921.14829c-.29755,3.73935-.6756,7.52948-1.12409,11.26514ZM493.95462,449.22771c-.30255-3.74438-.5332-7.54687-.68561-11.30221l1.87286-.076c.15149,3.73019.3808,7.50751.681,11.22717Zm561.266-11.61484-1.87286-.07415c.14648-3.73569.22149-7.519.22149-11.245l-.00091-.62109h1.87469l.00092.617c.00006,3.7544-.07495,7.56241-.22327,11.32324ZM494.907,426.60448h-1.87469l.00045-.31488c0-3.65695.071-7.36059.21146-11.00335l1.87286.07232c-.13913,3.619-.20962,7.29788-.20962,10.93515Zm558.41419-12.17413c-.15473-3.72241-.38721-7.49973-.69294-11.22626l1.86921-.15286c.30664,3.75168.541,7.55374.69659,11.3013ZM495.774,404.13094l-1.8692-.14645c.29474-3.754.66916-7.54459,1.11219-11.26746l1.86187.22153C496.43851,396.63668,496.06686,400.40258,495.774,404.13094Zm555.71378-12.11554c-.45221-3.69723-.98676-7.443-1.59094-11.1329l1.85089-.30252c.60687,3.71463,1.14606,7.48553,1.6001,11.2084ZM498.4313,381.80016l-1.85092-.2966c.59409-3.71188,1.27194-7.46081,2.01569-11.14157l1.83716.37073C499.695,374.38921,499.02173,378.11254,498.4313,381.80016Zm549.42606-11.97824c-.75244-3.66336-1.5882-7.35327-2.48438-10.96857l1.81977-.45129c.90258,3.63956,1.74383,7.3551,2.50085,11.04272Zm-544.97681-10.066-1.82116-.44488c.8916-3.64872,1.87106-7.33039,2.91091-10.94339l1.80149.51855c-1.03305,3.58878-2.00559,7.24573-2.89127,10.86972Zm539.566-11.76175c-1.04352-3.5805-2.175-7.19125-3.36493-10.73147l1.77765-.59684c1.19733,3.564,2.337,7.199,3.3869,10.80381ZM509.101,338.14373l-1.779-.59134c1.18634-3.56955,2.4642-7.16928,3.7984-10.699l1.75388.66275C511.54873,331.02251,510.27911,334.598,509.101,338.14373Zm526.18176-11.46747c-1.33191-3.48715-2.7489-6.98438-4.21167-10.39508l1.72278-.73871c1.47284,3.43359,2.8999,6.95416,4.241,10.46466Zm-518.20739-9.6225-1.7255-.73413c1.4733-3.46335,3.03861-6.94546,4.652-10.34842l1.69391.8028C520.09292,310.1545,518.5386,313.6133,517.07538,317.05376Zm509.36572-10.99283c-1.60468-3.36038-3.29993-6.73446-5.03919-10.02847l1.65686-.87555c1.752,3.31644,3.45923,6.713,5.074,10.09668Zm-499.71253-9.36847-1.66052-.87054c1.74747-3.33063,3.58829-6.6727,5.4708-9.93375l1.6239.93735c-1.87018,3.23911-3.69864,6.55917-5.43421,9.86691ZM1015.959,286.21224c-1.87469-3.22717-3.83728-6.45575-5.83465-9.59689l1.58178-1.006c2.01111,3.16221,3.98652,6.41272,5.874,9.661Zm-477.96945-9.02338-1.58453-1.00235c2.01111-3.17959,4.11419-6.361,6.25024-9.45544l1.54242,1.065c-2.12189,3.07388-4.21033,6.23377-6.20813,9.39276Zm465.9166-9.931c-2.12641-3.06424-4.34351-6.1271-6.58893-9.10211l1.49573-1.12958c2.261,2.99512,4.49267,6.07813,6.63287,9.16346Zm-453.1287-8.59542-1.4985-1.12592c2.25915-3.007,4.60941-6.00766,6.98529-8.91949l1.4527,1.18542c-2.36029,2.89212-4.695,5.87305-6.93952,8.85995Zm439.58927-9.34012c-2.36444-2.88483-4.82135-5.76142-7.30017-8.54969l1.40051-1.24581c2.49628,2.807,4.96869,5.70282,7.34961,8.60733ZM565.00482,241.229l-1.40329-1.24215c2.48892-2.81208,5.07077-5.614,7.6741-8.32816l1.353,1.298c-2.586,2.69577-5.15088,5.47943-7.62378,8.27227Zm410.42383-8.70987c-2.59418-2.69168-5.2735-5.36367-7.96472-7.94232l1.29712-1.35385c2.70861,2.596,5.40625,5.28589,8.0169,7.99542Zm-394.85358-7.52215-1.29986-1.35111c2.705-2.6029,5.50189-5.18792,8.31213-7.68417l1.24487,1.40143c-2.79193,2.47977-5.57007,5.04834-8.2572,7.63382Zm378.61286-8.03934c-2.80109-2.47656-5.68726-4.92706-8.57715-7.28277l1.18451-1.45316c2.909,2.37177,5.81451,4.83826,8.63391,7.33176Zm-361.8014-6.89007-1.18817-1.45c2.90863-2.38229,5.90192-4.73437,8.89618-6.99168l1.12866,1.49666c-2.97461,2.24222-5.94775,4.57919-8.83673,6.945Zm344.35877-7.32718c-2.99054-2.24453-6.06531-4.45655-9.13642-6.57474l1.06366-1.54334c3.09217,2.13239,6.18708,4.35906,9.19867,6.61869Zm-326.415-6.20356-1.06824-1.54058c3.09033-2.14154,6.26074-4.24555,9.4234-6.25391l1.00507,1.5827c-3.14154,1.99457-6.291,4.0844-9.36023,6.21175Zm307.8822-6.57519c-3.16083-1.99645-6.404-3.95491-9.64081-5.82092l.93738-1.62389c3.257,1.87837,6.5221,3.8501,9.7049,5.85983Zm-288.9223-5.46529-.94055-1.62205c3.24139-1.87975,6.56878-3.7215,9.88885-5.47307l.87512,1.65776c-3.29858,1.74008-6.60357,3.56947-9.82342,5.4373Zm269.41272-5.78476c-3.31091-1.73465-6.70337-3.42582-10.08386-5.02636l.80188-1.69437c3.40338,1.61107,6.81958,3.31367,10.15161,5.06023ZM654.14435,174.0248l-.80689-1.69255c3.38049-1.61153,6.843-3.17775,10.29163-4.65517l.73779,1.72321c-3.42535,1.46728-6.86493,3.023-10.22253,4.62445Zm229.1922-4.95451c-3.4455-1.46324-6.96607-2.8743-10.46466-4.19521l.66271-1.75387c3.52149,1.3296,7.06678,2.75073,10.53425,4.22358ZM674.76471,165.1941l-.66779-1.752c3.50775-1.33739,7.09424-2.62166,10.65961-3.81761l.59588,1.77768c-3.54107,1.1876-7.10333,2.46365-10.5877,3.79187Zm187.4768-4.08673c-3.54254-1.1749-7.15741-2.293-10.74475-3.32331l.51813-1.80146c3.61121,1.03712,7.24982,2.16259,10.81616,3.34527Zm-166.15478-3.06562-.52362-1.79965c3.60522-1.049,7.28418-2.03854,10.93426-2.94157l.45038,1.81978c-3.62585.897-7.28,1.88014-10.861,2.92138Zm144.53943-3.14206c-3.61945-.88287-7.31348-1.70443-10.97864-2.44178l.36981-1.83809c3.68988.74238,7.40863,1.56988,11.0528,2.45826Zm-122.709-2.25692-.37622-1.83626c3.67523-.75246,7.42194-1.44081,11.13611-2.04634l.30206,1.85C725.28924,151.212,721.56775,151.8958,717.91717,152.64277Zm100.66236-2.18044c-3.68671-.58768-7.43476-1.10853-11.1402-1.547l.22058-1.86189c3.73016.44167,7.50342.96573,11.21436,1.558Zm-78.46662-1.4367-.227-1.861c3.72925-.454,7.519-.839,11.2638-1.14285l.152,1.8683c-3.72009.30255-7.48461.68427-11.18872,1.13555Zm56.134-1.20876c-3.71644-.28972-7.49427-.5085-11.22809-.64992l.07141-1.87379c3.75854.1428,7.561.363,11.30224.65449Zm-33.71857-.61377-.07691-1.87286c3.74848-.1547,7.557-.23618,11.31965-.24257l.00274,1.87469c-3.73743.00641-7.52118.08742-11.24542.24074Z" transform="translate(-144.55603 -123.1929)" fill="#ccc"/><circle cx="530.38349" cy="297.68538" r="180.90894" fill="#3f3d56"/><ellipse cx="466.17488" cy="297.68538" rx="96.07861" ry="132.16663" fill="#fff"/><ellipse cx="434.32575" cy="325.68538" rx="26.81427" ry="42.18085" fill="#3f3d56"/><circle cx="885.81702" cy="196.65475" r="17.80969" fill="#11067d"/><circle id="c" cx="680.09215" cy="26.24586" r="26.24586" fill="#11067d"/><circle id="c1" cx="662.70442" cy="581.35092" r="17.80969" fill="#11067d"/></svg>
</div>

.rotate {
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:orbit;
-webkit-animation-duration:5s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-moz-animation-name:orbit;
-moz-animation-duration:5s;
}
#-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg); -webkit-transform-origin: 50% 50%; }
to { -webkit-transform:rotate(360deg); -webkit-transform-origin: 50% 50%; }
}
#-moz-keyframes orbit {
from { -moz-transform:rotate(0deg); -moz-transform-origin: 50% 50%; }
to { -moz-transform:rotate(360deg); -moz-transform-origin: 50% 50%; }
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
<g class="rotate">
<g>
<circle fill="#FFFFFF" cx="250" cy="250" r="220.797"/>
<circle fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7.0069,7.0069" cx="250" cy="250" r="220.797"/>
</g>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="363.787" cy="63.876" r="23.894"/>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="418.655" cy="394.851" r="21.239"/>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="85.911" cy="105.469" r="21.239"/>
</g>
<g>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="199.608" cy="294.041" r="150.885"/>
<ellipse transform="matrix(0.9889 -0.1488 0.1488 0.9889 -43.6117 23.8941)" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="137.843" cy="303.338" rx="85.912" ry="96.809"/>
<ellipse transform="matrix(0.9889 -0.1488 0.1488 0.9889 -45.7056 14.6961)" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="75.344" cy="312.744" rx="16.372" ry="24.336"/>
</g>
</g>
</svg>
Your svg code was not correct. So I create new one. I used Keyframe animation where I mentioned rotate css and most important transform-origin.

SVG - CSS - draw animation on certain svg path

I have a kind of like Frankenstein svg with a scar on his face. What I would like to have is that his scar renders delayed. Kind of like drawing animations.
For the sake of completeness, it looks like:
The path of the scar in his face is:
<path id="scar" d="..."/>
As you can see I gave the path an id. In my CSS class I tried to assign the animation to the id:
#scar {
animation-name: draw;
animation-duration: 5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
But that did not work out...Someone any ideas?
Edit
full svg:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<path style="fill:#E6E6E6;" d="M303.852,190.448c6.972,0,12.645-5.672,12.645-12.643c0-0.591-0.041-1.177-0.123-1.758h-25.039
c-0.082,0.58-0.123,1.167-0.123,1.758C291.21,184.776,296.882,190.448,303.852,190.448z"/>
<path style="fill:#81AF31;" d="M138.086,170.102c-1.694,0.196-2.784,0.609-3.24,1.228c-2.083,2.834,2.176,25.193,2.176,25.193
c4.459,23.446,11.74,34.058,15.485,34.105c5.253,0.063,7.752-0.294,9.335-1.004c-5.151-15.979-8.764-33.807-10.78-53.428
C148.651,172.703,143.261,169.499,138.086,170.102z"/>
<path style="fill:#333333;" d="M157.9,147.714c2.222-3.334,4.743-7.113,4.743-9.26V43.563c0-3.238,2.624-5.863,5.863-5.863H343.49
c3.239,0,5.863,2.625,5.863,5.863v94.891c0,2.148,2.52,5.926,4.743,9.26c2.709,4.06,5.662,8.504,6.969,13.459
c1.834-0.922,3.77-1.629,5.747-2.117V34.668c0-11.647-9.476-21.122-21.123-21.122H166.305c-11.647,0-21.122,9.476-21.122,21.122
v124.386c1.978,0.487,3.915,1.193,5.748,2.114C152.24,156.214,155.194,151.772,157.9,147.714z"/>
<g>
<path style="fill:#81AF31;" d="M255.999,225.206c3.826,0,6.939-3.114,6.939-6.942v-42.218h-13.881v42.218
C249.057,222.091,252.171,225.206,255.999,225.206z"/>
<path style="fill:#81AF31;" d="M360.935,176.195c-2.017,19.622-5.628,37.451-10.78,53.43c1.582,0.711,4.081,1.068,9.333,1.003
c3.748-0.047,11.028-10.659,15.486-34.105c0,0,4.26-22.359,2.177-25.193c-0.456-0.619-1.545-1.033-3.241-1.228
C368.741,169.502,363.349,172.702,360.935,176.195z"/>
<path style="fill:#81AF31;" d="M298.518,256.794l-4.072,49.296c6.228-6.313,10.445-14.199,14.77-22.28
c2.907-5.436,5.915-11.056,9.545-16.162c9.219-12.964,16.482-28.583,21.787-46.663
C323.995,242.358,305.862,253.062,298.518,256.794z"/>
</g>
<path style="fill:#808080;" d="M321.407,308.647h21.395c1.826,0,2.751-1.536,2.751-4.564c0-3.029-0.925-4.564-2.751-4.564h-21.395
V308.647z"/>
<path style="fill:#E6E6E6;" d="M208.143,190.448c6.972,0,12.644-5.672,12.644-12.643c0-0.591-0.041-1.177-0.123-1.758h-25.039
c-0.082,0.58-0.123,1.167-0.123,1.758C195.5,184.776,201.172,190.448,208.143,190.448z"/>
<g>
<path style="fill:#81AF31;" d="M202.315,306.081v25.404c0.072,0.749,0.308,3.203,0.715,7.031
c4.108,19.926,26.153,35.31,52.967,36.028c26.787-0.716,48.813-16.068,52.954-35.962c0.414-3.854,0.655-6.327,0.728-7.092v-25.408
c-9.731,13.82-24.207,25.365-53.68,25.367h-0.001h-0.001h-0.001c0,0,0,0-0.001,0C226.523,331.448,212.047,319.903,202.315,306.081z
"/>
<path style="fill:#81AF31;" d="M281.955,314.86l2.903-35.145h-57.722l2.901,35.144c6.667,3.057,15.036,4.865,25.961,4.865
C266.92,319.723,275.289,317.916,281.955,314.86z"/>
</g>
<g>
<path style="fill:#333333;" d="M348.926,426.596c-0.827-1.343-1.078-2.962-0.697-4.492s1.363-2.841,2.723-3.64l35.987-21.1
c-20.172-18.65-51.77-43.244-66.646-54.629c-2.971,26.921-12.152,100.466-28.929,155.716h47.091l29.045-41.689L348.926,426.596z"/>
<path style="fill:#333333;" d="M125.056,397.365l35.987,21.1c1.36,0.797,2.342,2.109,2.723,3.64c0.381,1.53,0.13,3.15-0.697,4.492
l-18.575,30.167l29.045,41.689h47.064c-16.775-54.741-25.946-128.682-28.91-155.711
C176.815,354.128,145.225,378.718,125.056,397.365z"/>
</g>
<path style="fill:#808080;" d="M259.344,386.123c-0.449,0.11-6.243,0.11-6.691,0c-18.519-1.174-34.954-8.436-46.249-19.307
c4.611,35.257,13.223,89.888,26.485,131.636h46.206c13.239-42.128,21.846-96.495,26.465-131.605
C294.265,377.701,277.844,384.952,259.344,386.123z"/>
<path style="fill:#333333;" d="M338.196,341.72c18.52,14.397,46.087,36.457,62.535,52.573c1.304,1.278,1.938,3.092,1.717,4.904
c-0.223,1.813-1.278,3.418-2.854,4.342l-37.542,22.011l17.448,28.338c1.223,1.988,1.151,4.511-0.182,6.426l-26.571,38.138h71.719
v-41.491c0-3.237,2.624-5.863,5.863-5.863s5.863,2.625,5.863,5.863v41.491h61.725c0,0-31.312-91.272-31.438-91.438
C466.035,406.427,453.946,364.643,338.196,341.72z"/>
<path style="fill:#808080;" d="M190.589,299.519h-21.393c-1.827,0-2.752,1.535-2.752,4.564c0,3.028,0.925,4.564,2.752,4.564h21.393
V299.519z"/>
<g>
<path style="fill:#81AF31;" d="M202.782,283.809c4.323,8.08,8.541,15.964,14.766,22.277l-4.07-49.293
c-7.342-3.731-25.467-14.412-42.016-35.77c5.304,18.064,12.562,33.669,21.774,46.623
C196.866,272.752,199.873,278.373,202.782,283.809z"/>
<path style="fill:#81AF31;" d="M221.311,247.539c2.011,0.849,3.396,2.749,3.575,4.924l1.282,15.527h59.659l1.283-15.527
c0.181-2.183,1.564-4.085,3.587-4.928c0.36-0.151,37.185-16.15,57.28-61.928c0.84-6.081,1.533-12.337,2.036-18.815
c0.284-3.641-2.744-8.18-5.671-12.569c-3.301-4.949-6.714-10.068-6.714-15.767V49.426h-14.572v13.41
c0,3.238-2.624,5.863-5.863,5.863s-5.863-2.625-5.863-5.863v-13.41h-18.873v13.41c0,3.238-2.624,5.863-5.863,5.863
s-5.863-2.625-5.863-5.863v-13.41h-18.872v13.41c0,3.238-2.624,5.863-5.863,5.863c-3.239,0-5.863-2.625-5.863-5.863v-13.41h-18.872
v13.41c0,3.238-2.624,5.863-5.863,5.863s-5.863-2.625-5.863-5.863v-13.41h-18.872v13.41c0,3.238-2.624,5.863-5.863,5.863
s-5.863-2.625-5.863-5.863v-13.41h-14.571v89.028c0,5.699-3.412,10.816-6.714,15.765c-2.927,4.389-5.953,8.928-5.669,12.57
c0.504,6.48,1.197,12.738,2.037,18.819C184.119,231.383,220.941,247.382,221.311,247.539z M198.847,106.109
c-3.239,0-5.863-2.625-5.863-5.863s2.624-5.863,5.863-5.863h3.435V74.716c0-3.238,2.624-5.863,5.863-5.863
c3.239,0,5.863,2.625,5.863,5.863v19.668h3.435c3.239,0,5.863,2.625,5.863,5.863c0,3.238-2.624,5.863-5.863,5.863h-3.435v17.998
h3.435c3.239,0,5.863,2.625,5.863,5.863c0,3.238-2.624,5.863-5.863,5.863h-3.435v12.698c0,3.238-2.624,5.863-5.863,5.863
c-3.239,0-5.863-2.625-5.863-5.863v-12.698h-3.435c-3.239,0-5.863-2.625-5.863-5.863s2.624-5.863,5.863-5.863h3.435v-17.998
H198.847z M177.051,176.046c-3.239,0-5.863-2.625-5.863-5.863s2.624-5.863,5.863-5.863h157.895c3.239,0,5.863,2.625,5.863,5.863
s-2.624,5.863-5.863,5.863h-6.794c0.042,0.583,0.072,1.168,0.072,1.758c0,13.438-10.933,24.369-24.371,24.369
c-13.437,0-24.368-10.932-24.368-24.369c0-0.59,0.028-1.174,0.072-1.758h-4.891v32.096c9.068,2.563,15.744,10.878,15.744,20.757
c0,3.238-2.624,5.863-5.863,5.863s-5.863-2.625-5.863-5.863c0-3.34-1.672-6.287-4.215-8.076
c-1.254,9.083-9.047,16.107-18.468,16.107c-9.425,0-17.221-7.027-18.472-16.114c-2.545,1.789-4.214,4.742-4.214,8.083
c0,3.238-2.624,5.863-5.863,5.863c-3.239,0-5.863-2.625-5.863-5.863c0-9.88,6.673-18.214,15.744-20.777v-32.076h-4.89
c0.042,0.583,0.072,1.168,0.072,1.758c0,13.438-10.932,24.369-24.37,24.369c-13.437,0-24.369-10.932-24.369-24.369
c0-0.59,0.028-1.174,0.072-1.758H177.051z"/>
</g>
<path style="fill:#333333;" d="M132.496,453.888l17.448-28.338l-37.543-22.011c-1.576-0.924-2.63-2.529-2.854-4.342
c-0.222-1.813,0.413-3.626,1.717-4.904c16.444-16.111,44.004-38.165,62.524-52.562c-58.347,11.568-89.687,28.218-106.499,40.205
c-16.79,11.97-21.748,24.973-21.771,25.079c-0.047,0.203-31.437,91.438-31.437,91.438h61.725v-41.491
c0-3.237,2.624-5.863,5.863-5.863c3.239,0,5.863,2.625,5.863,5.863v41.491h71.719l-26.572-38.138
C131.344,458.398,131.273,455.875,132.496,453.888z"/>
<path id="scar" style="fill:#333333;" d="M198.847,124.107c-3.239,0-5.863,2.625-5.863,5.863c0,3.238,2.624,5.863,5.863,5.863h3.435v12.698
c0,3.238,2.624,5.863,5.863,5.863c3.239,0,5.863-2.625,5.863-5.863v-12.698h3.435c3.239,0,5.863-2.625,5.863-5.863
s-2.624-5.863-5.863-5.863h-3.435v-17.998h3.435c3.239,0,5.863-2.625,5.863-5.863s-2.624-5.863-5.863-5.863h-3.435V74.716
c0-3.238-2.624-5.863-5.863-5.863c-3.239,0-5.863,2.625-5.863,5.863v19.668h-3.435c-3.239,0-5.863,2.625-5.863,5.863
c0,3.238,2.624,5.863,5.863,5.863h3.435v17.998H198.847z"/>
<path d="M208.143,202.174c13.438,0,24.37-10.932,24.37-24.369c0-0.59-0.028-1.174-0.072-1.758h4.89v32.076
c-9.07,2.564-15.744,10.897-15.744,20.777c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863c0-3.34,1.67-6.293,4.214-8.083
c1.251,9.086,9.047,16.114,18.472,16.114c9.422,0,17.215-7.024,18.468-16.107c2.543,1.788,4.215,4.736,4.215,8.076
c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863c0-9.878-6.676-18.194-15.744-20.757v-32.096h4.891
c-0.042,0.583-0.072,1.168-0.072,1.758c0,13.438,10.931,24.369,24.368,24.369c13.438,0,24.371-10.932,24.371-24.369
c0-0.59-0.028-1.174-0.072-1.758h6.794c3.239,0,5.863-2.625,5.863-5.863s-2.624-5.863-5.863-5.863H177.051
c-3.239,0-5.863,2.625-5.863,5.863s2.624,5.863,5.863,5.863h6.794c-0.042,0.583-0.072,1.168-0.072,1.758
C183.774,191.242,194.706,202.174,208.143,202.174z M291.333,176.046h25.039c0.082,0.58,0.123,1.167,0.123,1.758
c0,6.971-5.673,12.643-12.645,12.643c-6.97,0-12.642-5.672-12.642-12.643C291.21,177.213,291.251,176.626,291.333,176.046z
M249.057,176.046h13.881v42.218c0,3.827-3.113,6.942-6.939,6.942c-3.828,0-6.942-3.114-6.942-6.942V176.046z M195.623,176.046
h25.039c0.082,0.58,0.123,1.167,0.123,1.758c0,6.971-5.672,12.643-12.644,12.643c-6.971,0-12.643-5.672-12.643-12.643
C195.5,177.213,195.541,176.626,195.623,176.046z"/>
<path d="M477.808,403.997c-1.481-5.345-18.783-54.621-156.401-77.228v-6.396h21.395c8.522,0,14.477-6.698,14.477-16.29
c0-9.592-5.953-16.29-14.477-16.29h-21.395V285.9c2.209-4.074,4.409-7.938,6.911-11.457c7.047-9.91,13.03-21.192,17.941-33.786
c3.325,1.314,12.893,1.704,13.377,1.697c16.189-0.202,23.775-27.428,26.858-43.639c0,0,5.216-27.376,0.107-34.327
c-1.898-2.582-4.607-4.35-8.062-5.298V34.668c0-18.112-14.735-32.848-32.849-32.848H166.305c-18.112,0-32.848,14.736-32.848,32.848
v124.42c-3.453,0.949-6.163,2.716-8.06,5.298c-5.11,6.952,0.106,34.328,0.106,34.328c3.084,16.211,10.673,43.437,26.857,43.639
c0.485,0.006,10.055-0.381,13.38-1.694c4.91,12.592,10.892,23.874,17.938,33.783c2.502,3.519,4.703,7.383,6.911,11.456v1.895
h-21.393c-8.525,0-14.478,6.698-14.478,16.29c0,9.592,5.953,16.29,14.478,16.29h21.393v6.396
c-137.624,22.609-154.921,71.89-156.401,77.229L0.319,502.408c-0.617,1.792-0.329,3.771,0.77,5.313s2.878,2.458,4.772,2.458h500.274
c1.895,0,3.673-0.916,4.772-2.458c1.1-1.542,1.388-3.521,0.77-5.313L477.808,403.997z M342.802,299.519
c1.826,0,2.751,1.535,2.751,4.564c0,3.028-0.925,4.564-2.751,4.564h-21.395v-9.127H342.802z M318.76,267.646
c-3.63,5.105-6.637,10.726-9.545,16.162c-4.324,8.081-8.542,15.967-14.77,22.28l4.072-49.296
c7.344-3.732,25.476-14.436,42.029-35.811C335.241,239.064,327.979,254.682,318.76,267.646z M255.995,331.449
c0.001,0,0.001,0,0.001,0h0.001h0.001H256c29.473-0.001,43.949-11.546,53.68-25.367v25.408c-0.074,0.765-0.315,3.238-0.728,7.092
c-4.142,19.893-26.167,35.246-52.954,35.962c-26.814-0.716-48.859-16.102-52.967-36.028c-0.408-3.827-0.645-6.282-0.715-7.031
v-25.404C212.047,319.903,226.523,331.448,255.995,331.449z M227.137,279.714h57.722l-2.903,35.145
c-6.667,3.056-15.035,4.863-25.958,4.863c-10.924,0-19.293-1.808-25.961-4.865L227.137,279.714z M373.911,170.102
c1.694,0.196,2.785,0.609,3.241,1.228c2.081,2.834-2.177,25.193-2.177,25.193c-4.458,23.446-11.739,34.058-15.486,34.105
c-5.252,0.066-7.751-0.292-9.333-1.003c5.152-15.979,8.764-33.809,10.78-53.43C363.349,172.702,368.741,169.502,373.911,170.102z
M145.183,34.668c0-11.647,9.475-21.122,21.122-21.122H345.69c11.647,0,21.123,9.476,21.123,21.122v124.389
c-1.978,0.487-3.914,1.194-5.747,2.117c-1.306-4.955-4.261-9.398-6.969-13.459c-2.222-3.334-4.743-7.113-4.743-9.26V43.563
c0-3.238-2.624-5.863-5.863-5.863H168.506c-3.239,0-5.863,2.625-5.863,5.863v94.891c0,2.147-2.52,5.926-4.743,9.26
c-2.708,4.058-5.66,8.5-6.968,13.453c-1.834-0.922-3.771-1.628-5.748-2.114V34.668H145.183z M152.508,230.629
c-3.745-0.047-11.026-10.659-15.485-34.105c0,0-4.26-22.359-2.176-25.193c0.456-0.619,1.544-1.033,3.24-1.228
c5.176-0.604,10.565,2.601,12.977,6.094c2.017,19.621,5.63,37.449,10.78,53.428C160.26,230.334,157.76,230.692,152.508,230.629z
M164.023,185.608c-0.841-6.081-1.534-12.339-2.037-18.819c-0.284-3.641,2.743-8.181,5.669-12.57
c3.301-4.949,6.714-10.067,6.714-15.765V49.426h14.571v13.41c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863v-13.41
h18.872v13.41c0,3.238,2.624,5.863,5.863,5.863c3.239,0,5.863-2.625,5.863-5.863v-13.41h18.872v13.41
c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863v-13.41h18.872v13.41c0,3.238,2.624,5.863,5.863,5.863
s5.863-2.625,5.863-5.863v-13.41h18.873v13.41c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863v-13.41h14.572v89.028
c0,5.699,3.413,10.817,6.714,15.767c2.927,4.389,5.954,8.927,5.671,12.569c-0.504,6.479-1.196,12.735-2.036,18.815
c-20.095,45.778-56.92,61.777-57.28,61.928c-2.023,0.843-3.405,2.745-3.587,4.928l-1.283,15.527h-59.661l-1.282-15.527
c-0.179-2.175-1.564-4.076-3.575-4.924C220.941,247.382,184.119,231.383,164.023,185.608z M171.462,221.023
c16.549,21.358,34.675,32.039,42.016,35.77l4.07,49.293c-6.225-6.313-10.443-14.197-14.766-22.277
c-2.908-5.436-5.916-11.058-9.546-16.163C184.024,254.691,176.766,239.088,171.462,221.023z M169.197,308.647
c-1.827,0-2.752-1.536-2.752-4.564c0-3.029,0.925-4.564,2.752-4.564h21.393v9.127H169.197z M87.531,498.453v-41.491
c0-3.238-2.624-5.863-5.863-5.863c-3.239,0-5.863,2.625-5.863,5.863v41.491H14.08c0,0,31.39-91.236,31.437-91.438
c0.025-0.107,4.981-13.11,21.771-25.079c16.813-11.986,48.152-28.637,106.499-40.204c-18.52,14.397-46.079,36.451-62.524,52.562
c-1.304,1.278-1.938,3.091-1.717,4.904c0.223,1.813,1.278,3.418,2.854,4.342l37.543,22.011l-17.448,28.338
c-1.223,1.988-1.151,4.511,0.182,6.426l26.572,38.138H87.531V498.453z M173.541,498.453l-29.045-41.689l18.575-30.167
c0.827-1.343,1.078-2.962,0.697-4.492c-0.381-1.53-1.363-2.842-2.723-3.64l-35.987-21.1c20.169-18.647,51.759-43.236,66.638-54.623
c2.964,27.029,12.136,100.969,28.91,155.711h-47.065V498.453z M232.888,498.453c-13.261-41.748-21.875-96.377-26.485-131.636
c11.297,10.871,27.731,18.133,46.249,19.307c0.448,0.11,6.242,0.11,6.691,0c18.5-1.173,34.921-8.423,46.216-19.277
c-4.619,35.112-13.227,89.479-26.465,131.605h-46.206V498.453z M291.366,498.453c16.777-55.25,25.958-128.796,28.929-155.716
c14.875,11.385,46.474,35.979,66.646,54.629l-35.987,21.1c-1.36,0.799-2.342,2.109-2.723,3.64c-0.381,1.53-0.13,3.15,0.697,4.492
l18.575,30.167l-29.045,41.689H291.366z M436.193,498.453v-41.491c0-3.238-2.624-5.863-5.863-5.863s-5.863,2.625-5.863,5.863v41.491
h-71.719l26.571-38.138c1.334-1.915,1.405-4.438,0.182-6.426l-17.448-28.338l37.542-22.011c1.576-0.924,2.63-2.529,2.854-4.342
c0.222-1.812-0.413-3.626-1.717-4.904c-16.448-16.115-44.015-38.176-62.535-52.573c115.75,22.922,127.839,64.707,128.283,65.294
c0.125,0.167,31.438,91.438,31.438,91.438h-61.725V498.453z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
components hml:
<div class="row">
<div class="col-md-8">
<div class="col-md-12">
<h1 class="text-focus-in">Welcome, to shock-me.de</h1>
</div>
<div class="mt-6 row">
<div class="col-md-6">
<img class="slide-in-fwd-center" src="./../../../assets/ghost.svg" alt="ghost" width="150px" height="auto">
</div>
<div class="col-md-6">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
... <== the paths included above
</svg>
</div>
</div>
</div>
</div>

do you need this ?
remember that you need to have an stroke on path to animate it.
svg { width: 200px; }
#scar {
stroke: #000;
stroke-width: 4px;
fill: none;
stroke-dasharray: 900;
stroke-dashoffset: 900;
animation: draw 2s linear 1 forwards;
}
#keyframes draw {
to {
stroke-dashoffset: 0;
fill: #000;
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<path id="scar" d="M198.847,124.107c-3.239,0-5.863,2.625-5.863,5.863c0,3.238,2.624,5.863,5.863,5.863h3.435v12.698
c0,3.238,2.624,5.863,5.863,5.863c3.239,0,5.863-2.625,5.863-5.863v-12.698h3.435c3.239,0,5.863-2.625,5.863-5.863
s-2.624-5.863-5.863-5.863h-3.435v-17.998h3.435c3.239,0,5.863-2.625,5.863-5.863s-2.624-5.863-5.863-5.863h-3.435V74.716
c0-3.238-2.624-5.863-5.863-5.863c-3.239,0-5.863,2.625-5.863,5.863v19.668h-3.435c-3.239,0-5.863,2.625-5.863,5.863
c0,3.238,2.624,5.863,5.863,5.863h3.435v17.998H198.847z"/>
</svg>

How to hide overflow when sliding an element of an SVG in using keyframe animation?

I need to slide up the entire hand and phone element (hand_phone class) onto it's current position on the red background. The trouble I have is only showing the hand when it's on the red background, not sliding it up on the blue or white. As if the hand and phone is behind everything else and the red box is a window. I've tried clipPath, hidden: overflow, but not having any luck.
https://jsfiddle.net/8moofbef/3/
.hand_phone {
animation: slide 1s;
}
#keyframes slide {
from {transform: translateY(400px)}
to {transform: translateY(0px)}
}

Define the <clipPath> that you want the hand to appear inside of. In this case it's just a <rect> the same size as the red one.
<defs>
<clipPath id="red-rect-clip">
<rect x="167.5" y="981.4" class="st2" width="391.7" height="451"/>
</clipPath>
</defs>
Secondly, you need apply the clip path to the correct elements. It can't be <g class="hand_phone"> because that is being animated with a transform. And any transform you apply to that will also move the clip path that is attached to it.
So what you need to do is surround the "hand_phone" elements with a parent group. Then apply the clip path to that. That way the clip doesn't move, and you get the effect you want.
<g clip-path="url(#red-rect-clip)">
<g class="hand_phone">
<...>
</g>
</g>
.hand_phone {
animation: slide 1s;
}
#keyframes slide {
from {transform: translateY(400px)}
to {transform: translateY(0px)}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 1920" style="enable-background:new 0 0 1920 1920;" xml:space="preserve">
<defs>
<clipPath id="red-rect-clip">
<rect x="167.5" y="981.4" class="st2" width="391.7" height="451"/>
</clipPath>
</defs>
<style type="text/css">
.st0{fill:#057BDB;}
.st1{fill:#FFFFFF;}
.st2{fill:#FF0049;}
.st3{clip-path:url(#SVGID_2_);}
.st4{fill:#01434C;}
.st5{fill:#03828E;}
.st6{fill:#085E67;}
.st7{fill:#6CB5AE;}
.st8{fill:#25A599;}
.st9{fill:#B5B5B5;}
.st10{fill:#DDDDDD;}
.st11{fill:#F27040;}
.st12{fill:#F48359;}
.st13{fill:#F05A2B;}
.st14{fill:#253D46;}
.st15{fill:#969BA4;}
.st16{fill:#465B66;}
.st17{fill:#AFBDC5;}
.st18{fill:#FF8B00;}
.st19{fill:#566D78;}
.st20{fill:#5D6972;}
.st21{fill:#78909B;}
.st22{fill:#F8A773;}
.st23{fill:#FAB685;}
.st24{fill:#F79B6A;}
.st25{fill:#140F2C;}
.st26{fill:#E5E5E5;}
.st27{fill:#F4F4F4;}
.st28{fill:#150E39;}
.st29{fill:#1C1749;}
.st30{fill:#171043;}
.st31{fill:#5E6A7E;}
.st32{fill:#0A038E;}
.st33{fill:#30120B;}
.st34{fill:#CBE6F3;}
.st35{fill:#838E93;}
.st36{fill:#BCB1D7;}
.st37{fill:#9F98C6;}
.st38{fill:#D8CEE6;}
.st39{fill:#FF88A7;}
.st40{fill:#EAEBF0;}
.st41{fill:#F0F1F8;}
.st42{fill:#D5DAEE;}
.st43{fill:#378E43;}
.st44{fill:#BD3A27;}
.st45{fill:#795549;}
.st46{fill:#F69D5E;}
.st47{fill:#221F1F;}
.st48{fill:#403F41;}
.st49{fill:#E6E6E7;}
.st50{fill-rule:evenodd;clip-rule:evenodd;fill:#D0A785;}
.st51{fill-rule:evenodd;clip-rule:evenodd;fill:#FFD6B6;}
.st52{fill-rule:evenodd;clip-rule:evenodd;fill:#AAAAAA;}
.st53{fill-rule:evenodd;clip-rule:evenodd;fill:#CCE9F9;}
.st54{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st55{fill-rule:evenodd;clip-rule:evenodd;fill:#CBCBCB;}
.st56{fill-rule:evenodd;clip-rule:evenodd;fill:#989898;}
.st57{fill-rule:evenodd;clip-rule:evenodd;fill:#93C6E2;}
.st58{fill:#CBCBCB;}
.st59{fill:#E6E6E6;}
.st60{fill:#96BEE5;}
.st61{opacity:0.5;fill:#F2F2F2;}
.st62{fill:#F2F2F2;}
.st63{fill:#CBCDCE;}
.st64{fill:#0D3EB7;}
.st65{fill:#4D4D4D;}
.st66{opacity:0.1;}
.st67{fill:#808080;}
.st68{fill:#D7D8D9;}
.st69{fill:#F1F2F2;}
.st70{fill:#FFFEF7;}
.st71{fill:#BDCAE8;}
.st72{opacity:0.5;fill:#FFFFFF;}
.st73{fill:#D7D7D7;}
.st74{fill:#D7869D;}
.st75{opacity:0.2;fill-rule:evenodd;clip-rule:evenodd;fill:#1A1A1A;}
.st76{opacity:0.65;}
.st77{fill:none;stroke:#ED1C24;stroke-width:2;stroke-miterlimit:10;}
.st78{fill:none;stroke:#ED1C24;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:1.9968,1.9968;}
.st79{opacity:0.95;fill:none;stroke:#ED1C24;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:2;}
.st80{fill:#567396;}
.st81{fill:#FFFFFF;stroke:#057BDB;stroke-width:0.75;stroke-miterlimit:10;}
</style>
<g>
<rect y="-1" class="st0" width="1920" height="1920"/>
<g class="white_rectangle">
<rect x="140.6" y="666.1" class="st1" width="849.2" height="793.9"/>
</g>
<g class="red_rectangle">
<rect x="167.5" y="981.4" class="st2" width="391.7" height="451"/>
</g>
<g clip-path="url(#red-rect-clip)">
<g class="hand_phone">
<path class="st46" d="M435.6,1066.8l-16,21c-4.1,5.3-23.5,14.4- 15.2,22.4c10.1,9.7,22.5,10.1,26.5,5.8l28-31
c4.2-5.1,10.1-14.8,1.3-23.2C450.1,1052,439.5,1062.5,435.6,1066.8z"/>
<path class="st46" d="M280.3,1138.7c-0.6,33.7-3.4,107.9-3.4,107.9s-1.2,15.3,4.8,22.2c6.1,6.9,15.1,9.9,15.1,9.9l-15.1,31.5
l80.3,42.6l56.4-87.9l-118.3-110.6C300.2,1154.2,303.5,1137,280.3,1138.7z"/>
<path class="st47" d="M418.3,1044.1H312.8c-7.1,0-12.9,5.8-12.9,12.9v201.7c0,7.2,5.8,12.9,12.9,12.9h105.5
c7.2,0,12.9-5.8,12.9-12.9v-201.7C431.3,1049.9,425.5,1044.1,418.3,1044.1z"/>
<rect x="308" y="1072.8" class="st1" width="115.2" height="167.1"/>
<circle class="st48" cx="365.6" cy="1060" r="4.8"/>
<path class="st48" d="M374,1250.7h-16.8c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3H374c2.9,0,5.3-2.4,5.3-5.3
C379.3,1253,376.9,1250.7,374,1250.7z"/>
<path class="st46" d="M424.7,1208l-5.1,6.5c-4.1,5.3-9,14.4-0.7,22.4c10.1,9.7,20.7-0.8,24.6-5.1l4.4-5.6
c4.2-5.1,10.1-14.8,1.3-23.2C439.2,1193.3,428.6,1203.8,424.7,1208z"/>
<path class="st46" d="M424.7,1166.5l-5.1,6.5c-4.1,5.3-9,14.4-0.7,22.4c10.1,9.7,20.7-0.8,24.6-5.1l4.4-5.6
c4.2-5.1,10.1-14.8,1.3-23.2C439.2,1151.8,428.6,1162.2,424.7,1166.5z"/>
<path class="st46" d="M424.7,1124.6l-5.1,6.4c-4.1,5.3-9,14.4-0.7,22.4c10.1,9.7,20.7-0.8,24.6-5l4.4-5.6
c4.2-5.1,10.1-14.8,1.3-23.2C439.2,1109.9,428.6,1120.4,424.7,1124.6z"/>
<polygon class="st49" points="270.7,1297.2 200,1433.1 335.4,1433.1 376.7,1353.7 "/>
<polygon class="st1" points="270.7,1297.2 200,1433.1 267.7,1433.1 323.7,1325.5 "/>
</g>
</g>
</g>
</svg>
https://jsfiddle.net/8moofbef/4/

Transform origin of nested element in complex SVG group

I'm having a heck of a time getting my transform origin correct on a nested SVG element and was wondering if I could borrow someones eyes to maybe spot my folly?
I've tried a number of different combinations and so far when I tend to get close to what I want in one browser, it's quite off on another.
For the PoC example we're looking at my little dude's propeller. I set the transform origin for this example at just center for the sake of an easy start (like I said, I tried a number of variations with no luck yet). Could anyone please tell me what's causing the differences between browsers (yes I tried specifying transforms in the various browser qualifiers like -webkit-* as well and hitting the X/Y in various ways) but you'll notice in Chrome it's a lot closer to center of the element, whereas in Firefox it appears the origin the center of the absolute parent SVG itself...
So, anyone want to teach me something new about nested element transform origins in SVG animations and help my little dude fly with his propeller where it needs to be? :)
CODEPEN to tinker with
PS - The vertical Green center line is just a visual size reference placeholder where my little dude flying it is in the real code since I can only add so many characters to an SO snippet...
body {text-align:center}
#keyframes adventure {
10% {
transform: translateX(5%) rotate(2deg);
} 25% {
transform: translateX(13%) rotate(15deg);
} 50% {
transform: translateX(-13%) rotate(-5deg);
} 75% {
transform: translateX(13%) rotate(15deg);
} 90% {
transform: translateX(-5%) rotate(-2deg);
}
}
#keyframes navigate {
10% {
transform: rotate(2deg);
} 25% {
transform: rotate(10deg);
} 50% {
transform: rotate(-5deg);
} 75% {
transform: rotate(10deg);
} 90% {
transform: rotate(-2deg);
}
}
#keyframes propel {
100% {transform: rotate(360deg)}
}
#fullcharacter {
transform-origin: 50%;
animation: adventure 5s infinite;
-webkit-transition-timing-function: step-start;
transition-timing-function: step-start;
}
#steering {
transform-origin: center;
animation: navigate 5s infinite;
}
#propeller {
transform-origin: center;
animation: propel 4s infinite linear;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="525px" height="250px" viewBox="0 0 525 250" enable-background="new 0 0 525 250" xml:space="preserve">
<rect fill="#81BFE9" width="525" height="250"/>
<g id="fullcharacter">
<g id="steering">
<path fill="#BE1E2D" d="M242.271,125.417c0,0.552-0.479,1-1.069,1h-3.03c-0.589,0-1.068-0.448-1.068-1l0,0
c0-0.552,0.479-1,1.068-1h3.03C241.792,124.417,242.271,124.865,242.271,125.417L242.271,125.417z"/>
<path fill="#BE1E2D" d="M286.358,125.417c0,0.551-0.479,1-1.068,1h-3.029c-0.59,0-1.068-0.449-1.068-1l0,0
c0-0.552,0.479-0.999,1.068-0.999h3.029C285.88,124.417,286.358,124.865,286.358,125.417L286.358,125.417z"/>
<g>
<path fill="#DDAC85" stroke="#BA9168" stroke-width="0.5" stroke-miterlimit="10" d="M239.87,127.589c0,0,3.407-2.738,4.75-2.583
c1.664,0.192,5.234,2.8,5,4.458c-0.225,1.591-5.795,2.781-5.795,2.781L239.87,127.589z"/>
<path fill="#DDAC85" stroke="#BA9168" stroke-width="0.5" stroke-miterlimit="10" d="M284.354,127.589
c0,0-3.407-2.738-4.75-2.583c-1.664,0.192-5.234,2.8-5,4.458c0.225,1.591,5.795,2.781,5.795,2.781L284.354,127.589z"/>
</g>
<path fill="#D6A685" stroke="#BA9168" stroke-width="0.25" stroke-miterlimit="10" d="M290.434,134.938
c0,0,4.426,6.422,4.673,9.203c0.171,1.925-0.751,6.394-2.025,7.245c-1.815,1.214-7.728-3.23-7.728-3.23L290.434,134.938z"/>
<path fill="#424142" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" d="M287.158,126.417h-0.908v-0.833h-5v0.833
h-0.993c0.003,0.117,0.015,0.229,0.015,0.348v15.422c0,4.61-2.687,8.349-6,8.349h-25c-3.313,0-6-3.738-6-8.349v-15.422
c0-0.118,0.011-0.23,0.015-0.348h-1.119v-0.833h-5v0.833h-1.199c-0.124,0.669-0.197,1.365-0.197,2.087v22.147
c0,4.61,2.687,8.349,6,8.349h39.583c3.313,0,6-3.738,6-8.349v-22.147C287.354,127.782,287.281,127.086,287.158,126.417z"/>
<path fill="#D6A685" stroke="#BA9168" stroke-width="0.25" stroke-miterlimit="10" d="M232.42,134.938
c0,0-4.425,6.422-4.673,9.203c-0.171,1.925,0.751,6.394,2.025,7.245c1.815,1.214,7.727-3.23,7.727-3.23L232.42,134.938z"/>
<g>
<path fill="#EBB789" stroke="#C3996B" stroke-width="0.25" stroke-miterlimit="10" d="M232.876,145.963
c0,0,0.137,0.129-0.119,0.128c-0.902-0.003,0.79,2.842,1.599,3.242c2.943,1.456,11.196,0.29,12.908-2.524
c0.376-0.617,0.248-3.348-0.285-2.873c-1.528,1.364-4.473,0.662-4.473,0.662s2.94,0.374,4.415-0.846
c0.787-0.65,1.082-4.528,0.128-4.141c-2.34,0.95-5.744,0.766-5.744,0.766s3.64-0.21,5.679-0.978
c1.147-0.433,1.245-5.443,0.125-4.928c-2.998,1.379-6.156,1.212-6.156,1.212s3.492,0.042,6.086-1.379
c1.555-0.851,0.382-7.08-1.396-6.944c-7.403,0.563-11.077,0.177-12.742,1.556c-0.732,0.605-2.092,4.076-1.278,4.599
c0.773,0.496,1.112,0.793,1.112,0.793s-0.139,0.041-1.157-0.6c-1.301-0.816-1.986,5.729-0.506,6.143
c0.524,0.146,0.222,0.063,0.222,0.063s0.467,0.146-0.268,0.129c-1.533-0.036,0.135,5.875,1.669,5.911
C232.958,145.96,232.876,145.963,232.876,145.963z"/>
<path fill="#DDA885" d="M234.458,148.958c0,0,3.333,1.917,10.792-0.958c2.289-0.882,2.256-3.986,1.541-3.312
c-0.75,0.708-2.539,0.791-3.416,0.479c-1.875-0.667,2.438,2.127,1.75,2.416C239.068,150.126,234.458,148.958,234.458,148.958z"/>
<path fill="#DDA885" d="M241.688,140.75c0,0,2.303,0.095,3.063,0c0.632-0.079,2.472-0.625,2.472-0.625s-0.08,1.388-0.159,1.844
c-0.063,0.358-0.375,1.406-0.375,1.406s-0.953-1.477-1.438-1.781C244.476,141.105,241.688,140.75,241.688,140.75z"/>
<path fill="#DDA885" d="M241.094,136.094c0,0,2.758-0.124,3.656-0.313c0.639-0.134,2.472-0.844,2.472-0.844
s0.249,1.736,0.185,2.313c-0.049,0.447-0.531,1.719-0.531,1.719s-0.391-1.796-0.844-2.156
C245.054,136.037,241.094,136.094,241.094,136.094z"/>
<path fill="#DDA885" d="M239.068,128.156c0,0,2.998-0.086,3.995-0.156c0.697-0.049,2.781-0.281,2.781-0.281
s0.877,1.128,1.063,1.563c0.238,0.559,0.5,2.375,0.5,2.375s-1.416-2.35-2.188-2.781
C243.868,128.119,239.068,128.156,239.068,128.156z"/>
<path fill="#EBB789" stroke="#C3996B" stroke-width="0.25" stroke-miterlimit="10" d="M291.052,145.963
c0,0-0.138,0.129,0.119,0.128c0.901-0.003-0.79,2.842-1.599,3.242c-2.943,1.456-11.196,0.29-12.908-2.524
c-0.376-0.617-0.248-3.348,0.285-2.873c1.527,1.364,4.473,0.662,4.473,0.662s-2.94,0.374-4.415-0.846
c-0.786-0.65-1.082-4.528-0.128-4.141c2.34,0.95,5.743,0.766,5.743,0.766s-3.64-0.21-5.679-0.978
c-1.148-0.433-1.246-5.443-0.126-4.928c2.997,1.379,6.155,1.212,6.155,1.212s-3.492,0.042-6.086-1.379
c-1.555-0.851-0.381-7.08,1.396-6.944c7.403,0.563,11.077,0.177,12.742,1.556c0.732,0.605,2.092,4.076,1.279,4.599
c-0.773,0.496-1.112,0.793-1.112,0.793s0.14,0.041,1.157-0.6c1.301-0.816,1.986,5.729,0.506,6.143
c-0.523,0.146-0.222,0.063-0.222,0.063s-0.468,0.146,0.269,0.129c1.532-0.036-0.136,5.875-1.67,5.911
C290.971,145.96,291.052,145.963,291.052,145.963z"/>
<path fill="#DDA885" d="M289.469,148.958c0,0-3.332,1.917-10.791-0.958c-2.289-0.882-2.256-3.986-1.541-3.312
c0.75,0.708,2.539,0.791,3.416,0.479c1.875-0.667-2.438,2.127-1.75,2.416C284.859,150.126,289.469,148.958,289.469,148.958z"/>
<path fill="#DDA885" d="M282.24,140.75c0,0-2.303,0.095-3.063,0c-0.633-0.079-2.472-0.625-2.472-0.625s0.079,1.388,0.159,1.844
c0.063,0.358,0.375,1.406,0.375,1.406s0.953-1.477,1.438-1.781C279.452,141.105,282.24,140.75,282.24,140.75z"/>
<path fill="#DDA885" d="M282.834,136.094c0,0-2.758-0.124-3.656-0.313c-0.639-0.134-2.472-0.844-2.472-0.844
s-0.249,1.736-0.185,2.313c0.049,0.447,0.531,1.719,0.531,1.719s0.391-1.796,0.844-2.156
C278.873,136.037,282.834,136.094,282.834,136.094z"/>
<path fill="#DDA885" d="M284.859,128.156c0,0-2.997-0.086-3.994-0.156c-0.697-0.049-2.781-0.281-2.781-0.281
s-0.877,1.128-1.063,1.563c-0.238,0.559-0.5,2.375-0.5,2.375s1.416-2.35,2.188-2.781
C280.06,128.119,284.859,128.156,284.859,128.156z"/>
</g>
</g>
<g id="plane">
<path fill="#CE3232" stroke="#931C24" stroke-miterlimit="10" d="M297.126,174.5c0,0,55.101,6.274,72.374,12.5
c0.949,0.342,3.408,1.002,3.5,2.006c0.192,2.118-4.514,4.733-6.5,5.494c-15.415,5.906-66.001,2-66.001,2L297.126,174.5z"/>
<path fill="#CE3232" stroke="#931C24" stroke-miterlimit="10" d="M225.507,174.5c0,0-55.101,6.274-72.374,12.5
c-0.949,0.342-3.408,1.002-3.5,2.006c-0.192,2.118,4.514,4.733,6.5,5.494c15.415,5.906,66.001,2,66.001,2L225.507,174.5z"/>
<ellipse fill="#CE3232" stroke="#931C24" stroke-width="0.75" stroke-miterlimit="10" cx="260.962" cy="189.006" rx="49.754" ry="42.661"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="246.625" y1="149.8066" x2="276.7061" y2="149.8066">
<stop offset="0" style="stop-color:#5BCBF1"/>
<stop offset="0.0017" style="stop-color:#5BCAF1"/>
<stop offset="0.1744" style="stop-color:#4197D1"/>
<stop offset="0.3181" style="stop-color:#2F78BC"/>
<stop offset="0.4256" style="stop-color:#2467B1"/>
<stop offset="0.4848" style="stop-color:#2061AE"/>
<stop offset="0.6679" style="stop-color:#2C66B1"/>
<stop offset="1" style="stop-color:#3B6EB6"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#004C6D" stroke-width="0.25" stroke-miterlimit="10" d="M246.625,151.596
c0,0,2.098,2.086,3.006,2.404c5.572,1.955,17.985,1.766,23.619,0c1.004-0.314,3.456-2.404,3.456-2.404s-3.442-6.027-5.433-7.002
c-2.223-1.089-7.133,0.531-9.608,0.531c-2.313,0-7.461-1.542-9.541-0.531C250.123,145.567,246.625,151.596,246.625,151.596z"/>
<path fill="#BF312F" d="M261.375,219.229c-25.047,0-45.655-16.281-48.226-37.173c-0.444,2.261-0.688,4.581-0.688,6.95
c0,22.967,21.714,41.585,48.5,41.585c26.787,0,48.5-18.618,48.5-41.585c0-1.491-0.096-2.963-0.274-4.413
C305.328,204.249,285.398,219.229,261.375,219.229z"/>
<ellipse fill="#969696" stroke="#BCBEC0" stroke-width="7" stroke-miterlimit="10" cx="260.962" cy="189.006" rx="27.5" ry="25"/>
<radialGradient id="propeller_1_" cx="261.3926" cy="188.5" r="50.9983" gradientUnits="userSpaceOnUse">
<stop offset="0.3011" style="stop-color:#BCBEC0"/>
<stop offset="0.4531" style="stop-color:#E6E7E8"/>
<stop offset="0.9899" style="stop-color:#F1F2F2"/>
<stop offset="0.9936" style="stop-color:#F9ED32"/>
</radialGradient>
<path id="propeller" fill="url(#propeller_1_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" d="M291.618,198.024
l-25.939-12.274l2.33-28.48c0,0-0.02-31.189-6.862-31.182c-6.844,0.009-7.013,31.18-7.013,31.18l2.598,28.423l-26.065,12.334
c0,0-27.001,15.611-23.572,21.534c3.429,5.923,30.507-9.517,30.507-9.517l23.541-16.62l23.541,16.62
c0,0,27.079,15.439,30.507,9.517C318.62,213.636,291.618,198.024,291.618,198.024z M261.155,188.442l-0.013,0.022l-0.013-0.022
H261.155z"/>
<radialGradient id="SVGID_2_" cx="261.1426" cy="189.0049" r="11.9452" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#D1D3D4"/>
<stop offset="1" style="stop-color:#A7A9AC"/>
</radialGradient>
<ellipse fill="url(#SVGID_2_)" stroke="#6D6E71" stroke-width="2" stroke-miterlimit="10" cx="261.143" cy="189.005" rx="12.5" ry="11.363"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="155.7402" y1="175.625" x2="177.2904" y2="150.7379">
<stop offset="0.01" style="stop-color:#BCBEC0"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<polygon fill="url(#SVGID_3_)" points="149.627,187.171 180.5,140.842 152,186.134 "/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="59.2358" y1="175.626" x2="80.786" y2="150.7389" gradientTransform="matrix(-1 0 0 1 426.1279 0)">
<stop offset="0.01" style="stop-color:#BCBEC0"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<polygon fill="url(#SVGID_4_)" points="373.006,187.171 342.133,140.842 370.633,186.134 "/>
</g>
<rect x="260.5" y="13.75" fill="#6CBE45" width="0.462" height="217.917"/>
</g>
</svg>

You can't really use percentage values for transform-origin right now because percentage values are treated differently in Chrome and Firefox. That applies also to pseudo values like "center" which is defined to be equivalent to "50%".
You need to use absolute pixel values instead to be cross-browser compatible.
If you change your propellor animation, to use absolute coordinates, it will fix the animation:
#propeller {
transform-origin: 261px 189px;
animation: propel 4s infinite linear;
}
The coordinates I used here were just the cx and cy values of the <ellipse> that forms the propellor hub.
body {text-align:center}
#keyframes adventure {
10% {
transform: translateX(5%) rotate(2deg);
} 25% {
transform: translateX(13%) rotate(15deg);
} 50% {
transform: translateX(-13%) rotate(-5deg);
} 75% {
transform: translateX(13%) rotate(15deg);
} 90% {
transform: translateX(-5%) rotate(-2deg);
}
}
#keyframes navigate {
10% {
transform: rotate(2deg);
} 25% {
transform: rotate(10deg);
} 50% {
transform: rotate(-5deg);
} 75% {
transform: rotate(10deg);
} 90% {
transform: rotate(-2deg);
}
}
#keyframes propel {
100% {transform: rotate(360deg)}
}
#fullcharacter {
transform-origin: 50%;
animation: adventure 5s infinite;
-webkit-transition-timing-function: step-start;
transition-timing-function: step-start;
}
#steering {
transform-origin: center;
animation: navigate 5s infinite;
}
#propeller {
transform-origin: 261px 189px;
animation: propel 4s infinite linear;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="525px" height="250px" viewBox="0 0 525 250" enable-background="new 0 0 525 250" xml:space="preserve">
<rect fill="#81BFE9" width="525" height="250"/>
<g id="fullcharacter">
<g id="steering">
<path fill="#BE1E2D" d="M242.271,125.417c0,0.552-0.479,1-1.069,1h-3.03c-0.589,0-1.068-0.448-1.068-1l0,0
c0-0.552,0.479-1,1.068-1h3.03C241.792,124.417,242.271,124.865,242.271,125.417L242.271,125.417z"/>
<path fill="#BE1E2D" d="M286.358,125.417c0,0.551-0.479,1-1.068,1h-3.029c-0.59,0-1.068-0.449-1.068-1l0,0
c0-0.552,0.479-0.999,1.068-0.999h3.029C285.88,124.417,286.358,124.865,286.358,125.417L286.358,125.417z"/>
<g>
<path fill="#DDAC85" stroke="#BA9168" stroke-width="0.5" stroke-miterlimit="10" d="M239.87,127.589c0,0,3.407-2.738,4.75-2.583
c1.664,0.192,5.234,2.8,5,4.458c-0.225,1.591-5.795,2.781-5.795,2.781L239.87,127.589z"/>
<path fill="#DDAC85" stroke="#BA9168" stroke-width="0.5" stroke-miterlimit="10" d="M284.354,127.589
c0,0-3.407-2.738-4.75-2.583c-1.664,0.192-5.234,2.8-5,4.458c0.225,1.591,5.795,2.781,5.795,2.781L284.354,127.589z"/>
</g>
<path fill="#D6A685" stroke="#BA9168" stroke-width="0.25" stroke-miterlimit="10" d="M290.434,134.938
c0,0,4.426,6.422,4.673,9.203c0.171,1.925-0.751,6.394-2.025,7.245c-1.815,1.214-7.728-3.23-7.728-3.23L290.434,134.938z"/>
<path fill="#424142" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" d="M287.158,126.417h-0.908v-0.833h-5v0.833
h-0.993c0.003,0.117,0.015,0.229,0.015,0.348v15.422c0,4.61-2.687,8.349-6,8.349h-25c-3.313,0-6-3.738-6-8.349v-15.422
c0-0.118,0.011-0.23,0.015-0.348h-1.119v-0.833h-5v0.833h-1.199c-0.124,0.669-0.197,1.365-0.197,2.087v22.147
c0,4.61,2.687,8.349,6,8.349h39.583c3.313,0,6-3.738,6-8.349v-22.147C287.354,127.782,287.281,127.086,287.158,126.417z"/>
<path fill="#D6A685" stroke="#BA9168" stroke-width="0.25" stroke-miterlimit="10" d="M232.42,134.938
c0,0-4.425,6.422-4.673,9.203c-0.171,1.925,0.751,6.394,2.025,7.245c1.815,1.214,7.727-3.23,7.727-3.23L232.42,134.938z"/>
<g>
<path fill="#EBB789" stroke="#C3996B" stroke-width="0.25" stroke-miterlimit="10" d="M232.876,145.963
c0,0,0.137,0.129-0.119,0.128c-0.902-0.003,0.79,2.842,1.599,3.242c2.943,1.456,11.196,0.29,12.908-2.524
c0.376-0.617,0.248-3.348-0.285-2.873c-1.528,1.364-4.473,0.662-4.473,0.662s2.94,0.374,4.415-0.846
c0.787-0.65,1.082-4.528,0.128-4.141c-2.34,0.95-5.744,0.766-5.744,0.766s3.64-0.21,5.679-0.978
c1.147-0.433,1.245-5.443,0.125-4.928c-2.998,1.379-6.156,1.212-6.156,1.212s3.492,0.042,6.086-1.379
c1.555-0.851,0.382-7.08-1.396-6.944c-7.403,0.563-11.077,0.177-12.742,1.556c-0.732,0.605-2.092,4.076-1.278,4.599
c0.773,0.496,1.112,0.793,1.112,0.793s-0.139,0.041-1.157-0.6c-1.301-0.816-1.986,5.729-0.506,6.143
c0.524,0.146,0.222,0.063,0.222,0.063s0.467,0.146-0.268,0.129c-1.533-0.036,0.135,5.875,1.669,5.911
C232.958,145.96,232.876,145.963,232.876,145.963z"/>
<path fill="#DDA885" d="M234.458,148.958c0,0,3.333,1.917,10.792-0.958c2.289-0.882,2.256-3.986,1.541-3.312
c-0.75,0.708-2.539,0.791-3.416,0.479c-1.875-0.667,2.438,2.127,1.75,2.416C239.068,150.126,234.458,148.958,234.458,148.958z"/>
<path fill="#DDA885" d="M241.688,140.75c0,0,2.303,0.095,3.063,0c0.632-0.079,2.472-0.625,2.472-0.625s-0.08,1.388-0.159,1.844
c-0.063,0.358-0.375,1.406-0.375,1.406s-0.953-1.477-1.438-1.781C244.476,141.105,241.688,140.75,241.688,140.75z"/>
<path fill="#DDA885" d="M241.094,136.094c0,0,2.758-0.124,3.656-0.313c0.639-0.134,2.472-0.844,2.472-0.844
s0.249,1.736,0.185,2.313c-0.049,0.447-0.531,1.719-0.531,1.719s-0.391-1.796-0.844-2.156
C245.054,136.037,241.094,136.094,241.094,136.094z"/>
<path fill="#DDA885" d="M239.068,128.156c0,0,2.998-0.086,3.995-0.156c0.697-0.049,2.781-0.281,2.781-0.281
s0.877,1.128,1.063,1.563c0.238,0.559,0.5,2.375,0.5,2.375s-1.416-2.35-2.188-2.781
C243.868,128.119,239.068,128.156,239.068,128.156z"/>
<path fill="#EBB789" stroke="#C3996B" stroke-width="0.25" stroke-miterlimit="10" d="M291.052,145.963
c0,0-0.138,0.129,0.119,0.128c0.901-0.003-0.79,2.842-1.599,3.242c-2.943,1.456-11.196,0.29-12.908-2.524
c-0.376-0.617-0.248-3.348,0.285-2.873c1.527,1.364,4.473,0.662,4.473,0.662s-2.94,0.374-4.415-0.846
c-0.786-0.65-1.082-4.528-0.128-4.141c2.34,0.95,5.743,0.766,5.743,0.766s-3.64-0.21-5.679-0.978
c-1.148-0.433-1.246-5.443-0.126-4.928c2.997,1.379,6.155,1.212,6.155,1.212s-3.492,0.042-6.086-1.379
c-1.555-0.851-0.381-7.08,1.396-6.944c7.403,0.563,11.077,0.177,12.742,1.556c0.732,0.605,2.092,4.076,1.279,4.599
c-0.773,0.496-1.112,0.793-1.112,0.793s0.14,0.041,1.157-0.6c1.301-0.816,1.986,5.729,0.506,6.143
c-0.523,0.146-0.222,0.063-0.222,0.063s-0.468,0.146,0.269,0.129c1.532-0.036-0.136,5.875-1.67,5.911
C290.971,145.96,291.052,145.963,291.052,145.963z"/>
<path fill="#DDA885" d="M289.469,148.958c0,0-3.332,1.917-10.791-0.958c-2.289-0.882-2.256-3.986-1.541-3.312
c0.75,0.708,2.539,0.791,3.416,0.479c1.875-0.667-2.438,2.127-1.75,2.416C284.859,150.126,289.469,148.958,289.469,148.958z"/>
<path fill="#DDA885" d="M282.24,140.75c0,0-2.303,0.095-3.063,0c-0.633-0.079-2.472-0.625-2.472-0.625s0.079,1.388,0.159,1.844
c0.063,0.358,0.375,1.406,0.375,1.406s0.953-1.477,1.438-1.781C279.452,141.105,282.24,140.75,282.24,140.75z"/>
<path fill="#DDA885" d="M282.834,136.094c0,0-2.758-0.124-3.656-0.313c-0.639-0.134-2.472-0.844-2.472-0.844
s-0.249,1.736-0.185,2.313c0.049,0.447,0.531,1.719,0.531,1.719s0.391-1.796,0.844-2.156
C278.873,136.037,282.834,136.094,282.834,136.094z"/>
<path fill="#DDA885" d="M284.859,128.156c0,0-2.997-0.086-3.994-0.156c-0.697-0.049-2.781-0.281-2.781-0.281
s-0.877,1.128-1.063,1.563c-0.238,0.559-0.5,2.375-0.5,2.375s1.416-2.35,2.188-2.781
C280.06,128.119,284.859,128.156,284.859,128.156z"/>
</g>
</g>
<g id="plane">
<path fill="#CE3232" stroke="#931C24" stroke-miterlimit="10" d="M297.126,174.5c0,0,55.101,6.274,72.374,12.5
c0.949,0.342,3.408,1.002,3.5,2.006c0.192,2.118-4.514,4.733-6.5,5.494c-15.415,5.906-66.001,2-66.001,2L297.126,174.5z"/>
<path fill="#CE3232" stroke="#931C24" stroke-miterlimit="10" d="M225.507,174.5c0,0-55.101,6.274-72.374,12.5
c-0.949,0.342-3.408,1.002-3.5,2.006c-0.192,2.118,4.514,4.733,6.5,5.494c15.415,5.906,66.001,2,66.001,2L225.507,174.5z"/>
<ellipse fill="#CE3232" stroke="#931C24" stroke-width="0.75" stroke-miterlimit="10" cx="260.962" cy="189.006" rx="49.754" ry="42.661"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="246.625" y1="149.8066" x2="276.7061" y2="149.8066">
<stop offset="0" style="stop-color:#5BCBF1"/>
<stop offset="0.0017" style="stop-color:#5BCAF1"/>
<stop offset="0.1744" style="stop-color:#4197D1"/>
<stop offset="0.3181" style="stop-color:#2F78BC"/>
<stop offset="0.4256" style="stop-color:#2467B1"/>
<stop offset="0.4848" style="stop-color:#2061AE"/>
<stop offset="0.6679" style="stop-color:#2C66B1"/>
<stop offset="1" style="stop-color:#3B6EB6"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#004C6D" stroke-width="0.25" stroke-miterlimit="10" d="M246.625,151.596
c0,0,2.098,2.086,3.006,2.404c5.572,1.955,17.985,1.766,23.619,0c1.004-0.314,3.456-2.404,3.456-2.404s-3.442-6.027-5.433-7.002
c-2.223-1.089-7.133,0.531-9.608,0.531c-2.313,0-7.461-1.542-9.541-0.531C250.123,145.567,246.625,151.596,246.625,151.596z"/>
<path fill="#BF312F" d="M261.375,219.229c-25.047,0-45.655-16.281-48.226-37.173c-0.444,2.261-0.688,4.581-0.688,6.95
c0,22.967,21.714,41.585,48.5,41.585c26.787,0,48.5-18.618,48.5-41.585c0-1.491-0.096-2.963-0.274-4.413
C305.328,204.249,285.398,219.229,261.375,219.229z"/>
<ellipse fill="#969696" stroke="#BCBEC0" stroke-width="7" stroke-miterlimit="10" cx="260.962" cy="189.006" rx="27.5" ry="25"/>
<radialGradient id="propeller_1_" cx="261.3926" cy="188.5" r="50.9983" gradientUnits="userSpaceOnUse">
<stop offset="0.3011" style="stop-color:#BCBEC0"/>
<stop offset="0.4531" style="stop-color:#E6E7E8"/>
<stop offset="0.9899" style="stop-color:#F1F2F2"/>
<stop offset="0.9936" style="stop-color:#F9ED32"/>
</radialGradient>
<path id="propeller" fill="url(#propeller_1_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" d="M291.618,198.024
l-25.939-12.274l2.33-28.48c0,0-0.02-31.189-6.862-31.182c-6.844,0.009-7.013,31.18-7.013,31.18l2.598,28.423l-26.065,12.334
c0,0-27.001,15.611-23.572,21.534c3.429,5.923,30.507-9.517,30.507-9.517l23.541-16.62l23.541,16.62
c0,0,27.079,15.439,30.507,9.517C318.62,213.636,291.618,198.024,291.618,198.024z M261.155,188.442l-0.013,0.022l-0.013-0.022
H261.155z"/>
<radialGradient id="SVGID_2_" cx="261.1426" cy="189.0049" r="11.9452" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#D1D3D4"/>
<stop offset="1" style="stop-color:#A7A9AC"/>
</radialGradient>
<ellipse fill="url(#SVGID_2_)" stroke="#6D6E71" stroke-width="2" stroke-miterlimit="10" cx="261.143" cy="189.005" rx="12.5" ry="11.363"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="155.7402" y1="175.625" x2="177.2904" y2="150.7379">
<stop offset="0.01" style="stop-color:#BCBEC0"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<polygon fill="url(#SVGID_3_)" points="149.627,187.171 180.5,140.842 152,186.134 "/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="59.2358" y1="175.626" x2="80.786" y2="150.7389" gradientTransform="matrix(-1 0 0 1 426.1279 0)">
<stop offset="0.01" style="stop-color:#BCBEC0"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<polygon fill="url(#SVGID_4_)" points="373.006,187.171 342.133,140.842 370.633,186.134 "/>
</g>
<rect x="260.5" y="13.75" fill="#6CBE45" width="0.462" height="217.917"/>
</g>
</svg>

Instead of using transform origin, set the center of the rotation with 2 diferent translates.
(you move the element to wherever you want, rotate it, and move it back to where it was).
Your animation will be
#keyframes propel {
0% {transform: translate(257px, 188px) rotate(0deg) translate(-257px, -188px);}
100% {transform: translate(257px, 188px) rotate(360deg) translate(-257px, -188px);}
}
fixed codepen

animation property on svg element doesn't work on edge 15

please see below the svg.
the animation css property works on chrome 58.
the same animation property doesn't work on edge 15.15.
what is the correct way to animate an svg element using edge?
this is the style tag i have inserted on the svg.
<style>
.car-container {
transform-origin: 606px 600px;
animation: rotate-right 6s linear 0s infinite;
}
#keyframes rotate-right {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
please see the whole svg attached in the snippet.
<svg version="1.1" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
<symbol id="background" viewBox="0 0 1200 1200">
<style type="text/css">
.bg0{fill:#63C6BD;}
.bg1{fill:#EDF7F7;}
.bg2{fill:none;stroke:#36BDB1;stroke-width:5;stroke-miterlimit:10;stroke-dasharray:192.3119,96.156;}
</style>
<g>
<g>
<path class="bg0" d="M252.5,614.6H176v43h76.5V614.6z M246.7,620.4v6.9h-64.9v-6.9H246.7z M181.8,651.9v-18.7h64.9v18.7H181.8z"/>
<path class="bg0" d="M474.5,599.1V545H143v54.1h7.1v247.2H143v27.6h331.5v-27.6h-7.1V599.1H474.5z M468.7,852.1v16H148.8v-16
h102.7v0.2h114.6v-0.2H468.7z M251.5,776.4v70h-95.6V599.1h305.8v247.2h-95.6v-70H251.5z M360.3,782.2v64.2h-103v-64.2H360.3z
M148.8,593.3v-42.5h319.9v42.5H148.8z"/>
<path class="bg0" d="M447,614.6h-76.5v43H447V614.6z M441.2,651.9h-64.9v-18.7h64.9V651.9z M441.2,627.3h-64.9v-6.9h64.9V627.3z"
/>
<path class="bg0" d="M349.8,614.6h-76.5v43h76.5V614.6z M344,651.9H279v-18.7H344V651.9z M344,627.3H279v-6.9H344V627.3z"/>
<path class="bg0" d="M268.6,808.9H349v-22.1h-80.4V808.9z M274.4,792.6h68.8v10.5h-68.8V792.6z"/>
<path class="bg0" d="M268.6,842.3H349V812h-80.4V842.3z M274.4,817.8h68.8v18.7h-68.8V817.8z"/>
<path class="bg0" d="M447,667.9h-76.5v43H447V667.9z M441.2,705.2h-64.9v-19.4h64.9V705.2z M441.2,679.9h-64.9v-6.2h64.9V679.9z"
/>
<path class="bg0" d="M349.8,667.9h-76.5v43h76.5V667.9z M344,705.2H279v-19.4H344V705.2z M344,679.9H279v-6.2H344V679.9z"/>
<path class="bg0" d="M252.5,667.9H176v43h76.5V667.9z M246.7,705.2h-64.9v-19.4h64.9V705.2z M246.7,679.9h-64.9v-6.2h64.9V679.9z"
/>
<path class="bg0" d="M447,721.3h-76.5v43H447V721.3z M441.2,758.5h-64.9v-19.3h64.9V758.5z M441.2,733.4h-64.9v-6.3h64.9V733.4z"
/>
<path class="bg0" d="M349.8,721.3h-76.5v43h76.5V721.3z M344,758.5H279v-19.3H344V758.5z M344,733.4H279v-6.3H344V733.4z"/>
<path class="bg0" d="M252.5,721.3H176v43h76.5V721.3z M246.7,758.5h-64.9v-19.3h64.9V758.5z M246.7,733.4h-64.9v-6.3h64.9V733.4z"
/>
</g>
</g>
<path class="bg0" d="M955,670.9c-3.5,0-7,0.4-10.4,1.2c-4.1-14.9-13.2-24.7-28.2-27.8c-1.5-7.1-4.2-14-8.2-20.2
c7.7-8.5,12-19.4,12-31.1c0-24.9-19.7-45.2-44.2-46c-4.6-11.8-26.5-16.1-46.4-16.1c-31.9,0-64.2,9.8-64.2,28.5c0,0.5,0,1.1,0,1.6
c-13.7,7-22.4,21.2-22.4,36.8c0,4.7,0.8,9.3,2.3,13.7c-21.2,9-35,27.6-35.4,48.3c-0.6,30.4,27.3,55.7,62.3,56.4
c7.2,0.1,20.7,0.2,41.5,0.2v152c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-152c6.5,0,12.8,0,18.4,0c2.3,20.7,20.7,36.8,43,36.8
h35v48.6c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-48.6H955c23.8,0,43.2-18.5,43.2-41.2C998.3,689.4,978.9,670.9,955,670.9z
M816.7,710.7L816.7,710.7L816.7,710.7c-0.6,0-1.1,0-1.7,0c-21.4,0-35.4-0.1-42.6-0.2c-31.8-0.7-57.2-23.3-56.6-50.5
c0.4-19.1,13.9-36.4,34.4-44l2.9-1.1l-1.2-2.8c-2-4.5-3-9.3-3-14.2c0-13.9,8.2-26.6,20.8-32.3l1.9-0.8l-0.2-2c-0.1-1-0.1-2-0.1-3.1
c0-14,30.3-22.7,58.4-22.7c22.9,0,39.9,5.6,41.3,13.7l0.5,2.5l3-0.1c22,0,39.9,18,39.9,40.2c0,10.9-4.2,21.1-11.9,28.7l-1.7,1.7
l1.4,2c6.4,9.1,9.7,19.7,9.7,30.8c0,30-24.8,54.4-55.3,54.4c-3.1,0-7.7,0-13.2,0C835.7,710.7,826.3,710.7,816.7,710.7z M955,747.5
h-74c-19.1,0-34.8-13.6-37.1-31c5.3,0,9.7,0,12.7,0c33.7,0,61.1-27,61.1-60.2c0-2-0.1-3.9-0.3-5.8c12.5,3.4,19.7,12.4,22.3,25.8
l0.6,3.2l3.1-1c3.8-1.2,7.7-1.8,11.7-1.8c20.6,0,37.4,15.9,37.4,35.4C992.5,731.6,975.7,747.5,955,747.5z"/>
<path class="bg0" d="M1052.2,836.4c-2-9.2-10.5-15.9-20.4-15.9c-2.9,0-5.6,0.6-8.1,1.6c-3.4-6.7-8.9-12.2-15.7-15.9
c-3.1-17.3-18.8-30.1-37.4-30.1c-17.2,0-32.1,11-36.6,26.5c-2.9-0.7-5.8-1-8.8-1c-20.9,0-37.9,16.2-37.9,36.2
c0,19.9,17,36.2,37.9,36.2h64.3c4,0,7.9-0.6,11.6-1.7c2.3,0.8,4.8,1.3,7.4,1.3h33c11.5,0,20.9-9,20.9-20
C1062.4,846.4,1058.5,840,1052.2,836.4z M989.5,868.2h-64.3c-17.7,0-32.1-13.6-32.1-30.4c0-16.7,14.4-30.4,32.1-30.4
c3.4,0,6.8,0.5,10,1.5l3.1,1l0.6-3.2c2.8-14.4,16.1-24.9,31.6-24.9c16.2,0,29.9,11.4,31.9,26.6l0.2,1.6l1.4,0.7
c6.4,3.1,11.5,8.1,14.6,14.2c-3,2.3-5.3,5.4-6.6,8.9c-1.2-0.2-2.4-0.3-3.6-0.3c-11.5,0-20.9,9-20.9,20c0,5.6,2.4,10.7,6.3,14.3
C992.5,868,991,868.2,989.5,868.2z M1041.5,867.7h-33c-8.3,0-15.1-6.4-15.1-14.2c0-7.8,6.8-14.2,15.1-14.2c1.6,0,3.2,0.2,4.7,0.7
l3.1,1l0.6-3.2c1.3-6.7,7.5-11.6,14.8-11.6c7.6,0,14,5.3,15,12.4l0.2,1.6l1.4,0.7c5.1,2.4,8.2,7.3,8.2,12.6
C1056.6,861.4,1049.8,867.7,1041.5,867.7z"/>
<path class="bg0" d="M770.9,814.3h-43.5v-6.7h19.5v-22.8H728c0.2-0.4,0.2-0.7,0.2-1.2v-6h18.7v-22H595.5v22h17.6v6
c0,0.4,0.1,0.8,0.2,1.2h-17.8v22.8h16.8v6.7h-39.2v30.3h12.8v23.9c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-23.9h160.6v23.9
c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-23.9h12.8V814.3z M721.6,807.5v6.7H618.1v-6.7H721.6z M601.3,761.3h139.8v10.4H601.3
V761.3z M618.9,783.6v-6h103.5v6c0,0.4,0.1,0.8,0.2,1.2h-104C618.8,784.4,618.9,784,618.9,783.6z M601.3,790.5h139.8v11.2H601.3
V790.5z M765.1,838.8H578.9v-18.7h186.2V838.8z"/>
<path class="bg0" d="M548.1,803.4h-3.9l4.9-28.4h-46.9l4.9,28.4h-4.1c-1.6,0-2.9,1.3-2.9,2.9v61.4c0,1.6,1.3,2.9,2.9,2.9
c1.6,0,2.9-1.3,2.9-2.9v-18.2h39.4v18.2c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-61.4C551,804.7,549.7,803.4,548.1,803.4z
M542.2,780.9l-8.4,49.3h-16.2l-4.1-23.8c0,0,0-0.1,0-0.1c0-0.4-0.1-0.8-0.2-1.1l-4.2-24.4H542.2z M505.8,843.8v-34.6h2.2l4.6,26.8
h26l4.6-26.8h2v34.6H505.8z"/>
<path class="bg0" d="M1062.5,437.3H921.7l0.4-3.3c2.1-16.7,17.1-29.1,34.2-27.5c7.2-13.9,21.7-22.8,37.4-22.8
c15.7,0,30.1,8.8,37.4,22.6c15.8,0.1,29.1,12,31.1,27.6L1062.5,437.3z M928.5,431.5h127.3c-2.9-11.2-13.1-19.3-24.9-19.3
c-0.5,0-0.9,0-1.4,0l-2,0.1l-0.8-1.8c-6-12.8-18.9-21-33-21c-14.2,0-27.2,8.4-33.1,21.3l-0.9,2l-2.2-0.3
C944,410.4,931.7,419,928.5,431.5z"/>
<path class="bg0" d="M665.9,393.2h92.7l-0.4-3.3c-1.9-15.7-15.3-27.5-31.1-27.6c-7.2-13.8-21.7-22.6-37.4-22.6
c-15.8,0-30.2,8.9-37.4,22.8c-8.1-0.7-15.7,1.7-21.7,6.1c-7.2-5.5-16.1-8.6-25.4-8.6c-15.8,0-30.2,8.9-37.4,22.8
c-17.1-1.6-32.1,10.8-34.2,27.5l-0.4,3.3h140.8l-0.4-3.3C672.8,403.7,670,397.8,665.9,393.2z M653.6,368.4l2.2,0.3l0.9-2
c5.9-12.9,18.9-21.3,33.1-21.3c14.1,0,27,8.2,33,21l0.8,1.8l2-0.1c0.5,0,0.9,0,1.4,0c11.9,0,22,8.1,24.9,19.3h-92.7
c-4.8-3-10.5-4.8-16.5-4.8c-2-3.8-4.5-7.2-7.4-10.1C640.3,369,646.8,367.3,653.6,368.4z M540,407.7c3.2-12.5,15.5-21.1,29.1-19
l2.2,0.3l0.9-2c5.9-12.9,18.9-21.3,33.1-21.3c7.7,0,15,2.5,21,6.8c6.2,4.1,10.1,10.3,11.9,14.2c5.6,0.8,6.5,0.6,10.8,2.2
c1.9,0.7,6.3,3,8.3,4.2c5.1,3,8.4,8.5,10,14.5H540z"/>
<path class="bg0" d="M959.8,325.6H768.3l0.4-3.3c2.8-22.7,23.4-39.4,46.6-36.9c9.6-19.2,29.4-31.4,50.9-31.4
c21.4,0,41.1,12.2,50.8,31.2c0.1,0,0.2,0,0.4,0c21.3,0,39.4,16,42,37.1L959.8,325.6z M775,319.8h178.1
c-3.6-16.6-18.4-28.8-35.7-28.8c-0.7,0-1.3,0-2,0.1l-1.9,0.1l-0.8-1.8c-8.4-18-26.6-29.6-46.4-29.6c-20,0-38.3,11.8-46.6,30l-0.9,2
l-2.2-0.3c-2-0.3-3.9-0.5-5.9-0.5C793.4,291,778.6,303.2,775,319.8z"/>
<g id="back">
<g>
<rect x="128.4" y="868.1" class="bg0" width="962.6" height="5.8"/>
</g>
</g>
<g>
<path class="bg1" d="M604,15C283.1,15,23,275.1,23,596s260.1,581,581,581s581-260.1,581-581S924.9,15,604,15z M604,1023.6
c-236.1,0-427.6-191.4-427.6-427.6S367.9,168.4,604,168.4c236.1,0,427.6,191.4,427.6,427.6S840.1,1023.6,604,1023.6z"/>
</g>
<g>
<circle class="bg2" cx="604" cy="596" r="505"/>
</g>
</symbol>
<symbol id="car" viewBox="0 0 43 40.2">
<style type="text/css">
.car0{fill:#B3E5FC;}
.car1{fill:#FFC107;}
.car2{fill:#FF8F00;}
.car3{fill:#BF5300;}
.car4{fill:#FFE082;}
.car5{fill:#455A64;}
.car6{fill:#546E7A;}
.car7{fill:#FFECB3;}
</style>
<g>
<g>
<path class="car0" d="M6.8,10.7l-1,1.3c-0.1,0.1-0.2,0.1-0.3,0.1l-1.6-0.6c-0.2-0.1-0.2-0.3-0.1-0.4l1.6-2c0.1-0.1,0.3-0.1,0.4,0
l1,1.4C6.9,10.5,6.9,10.6,6.8,10.7z"/>
<path class="car0" d="M10.2,6.4l-1,1.3C9.2,7.8,9,7.8,8.9,7.8L7.4,7.1C7.2,7.1,7.2,6.9,7.3,6.7l1.6-2c0.1-0.1,0.3-0.1,0.4,0l1,1.4
C10.3,6.2,10.3,6.3,10.2,6.4z"/>
</g>
<g>
<path class="car1" d="M6.8,10.7l-1,1.3c-0.1,0.1-0.2,0.1-0.3,0.1l-1.4-0.5c-0.2-0.1-0.2-0.3-0.1-0.4l1.6-2C5.7,9,5.9,9,6,9.1
l0.9,1.3C6.9,10.5,6.9,10.6,6.8,10.7z"/>
<path class="car1" d="M10.2,6.4l-1,1.3C9.2,7.8,9,7.8,8.9,7.8L7.5,7.2C7.3,7.2,7.3,7,7.4,6.8l1.6-2c0.1-0.1,0.3-0.1,0.4,0l0.9,1.3
C10.3,6.2,10.3,6.3,10.2,6.4z"/>
</g>
<path class="car2" d="M22.7,6.7l-4.9-3.9c-0.3-0.3-0.9-0.2-1.1,0.1l0,0l-1.5-1.1c-1.1-0.8-2.6-0.6-3.4,0.4L2.1,14.5
c-0.8,1-0.7,2.6,0.4,3.4l1.5,1.2l0,0c-0.3,0.3-0.2,0.9,0.1,1.1l4.9,3.9c0.3,0.2,0.7,0.2,1,0l2.7,2.3l0.6,0.4l7.8,6.2
c-0.2,0.3-0.1,0.7,0.2,1l4.9,3.9c0.3,0.2,0.7,0.2,1,0l0,0c1.4,1,3.7,0.5,5-0.6c1.6-1.2,3.1-3.1,3.8-4c0.7-0.9,4-5,4.8-6.9
c0.7-1.6,0.7-4-0.6-5l0,0c0.2-0.3,0.1-0.7-0.2-1l-4.9-3.9c-0.3-0.2-0.7-0.2-1,0l-7.8-6.2l-0.6-0.5l-2.8-2.2C23.1,7.4,23,7,22.7,6.7
z"/>
<path class="car1" d="M28.4,9l-1.9,0.6c-0.2,0.1-0.3,0.2-0.5,0.3l-0.2,0.3L16.4,3c-1.5-1.2-3.8-0.9-5,0.6L3.4,13.8
c-1.2,1.5-1,3.7,0.5,5l9.1,7.5l-0.2,0.3c-0.1,0.2-0.2,0.3-0.2,0.5l-0.2,2c0,0,1.1,0.6,1.2,0.3l0.2-1.9c0-0.1,0-0.2-0.1-0.2
l-0.4-0.2l0.3-0.4l13.4,10.6c1.3,1,3.6,0.4,4.9-0.6c1.5-1.2,3-3,3.7-3.9c0.7-0.9,3.9-4.9,4.7-6.7c0.7-1.5,0.7-3.9-0.6-4.9
L26.3,10.7l0.3-0.4l0.2,0.3c0.1,0.1,0.2,0.1,0.3,0.1L29,10C29.2,9.9,28.4,9,28.4,9z"/>
<path class="car3" d="M14.7,7.3l-7,8.8c-0.4,0.6-1.3,0.7-1.8,0.2l-1.3-1C4.1,14.8,4,14,4.4,13.5l7-8.8c0.4-0.6,1.3-0.7,1.8-0.2
l1.3,1C15,6,15.1,6.8,14.7,7.3z"/>
<path class="car4" d="M37.9,21.7c1.2,1,1.6,2.6,1,4c-0.7,1.7-3.7,5.6-4.4,6.4c-0.6,0.8-2,2.4-3.5,3.5c-1.2,0.9-2.9,0.9-4.1,0L5.6,19
c-1.3-1-1.5-2.8-0.5-4.1l7.8-9.8c1-1.2,2.8-1.4,4.1-0.4L37.9,21.7z"/>
<g>
<g>
<g>
<path class="car5" d="M27.3,18L20.9,26c-0.3,0.4-0.8,0.5-1.3,0.2l-5-2.9c-0.5-0.3-0.7-0.8-0.6-1.3c0.3-1.2,1-3.4,2.8-5.8
c2.1-2.6,4-3.7,5-4.2c0.5-0.2,1-0.1,1.4,0.3l4,4.3C27.6,17.1,27.6,17.6,27.3,18z"/>
</g>
<g>
<path class="car6" d="M22,12.1c-1,0.5-3,1.6-5,4.2l7.2,5.7l3.2-4c0.3-0.4,0.3-0.9-0.1-1.3l-4-4.3C23,12.1,22.4,11.9,22,12.1z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="car5" d="M35.9,25.8l-5.5,6.9c-0.3,0.3-0.4,0.6-0.4,0.7l0.3,1.2c0,0.1,0.2,0,0.5-0.3c0.6-0.7,1.9-2,3.5-4.1
c1.8-2.2,2.8-3.7,3.3-4.5c0.2-0.3,0.3-0.5,0.2-0.5l-1.2,0C36.5,25.2,36.2,25.4,35.9,25.8z"/>
</g>
<g>
<path class="car6" d="M37.6,25.8c-0.5,0.7-1.5,2.2-3.2,4.4l-1.2-1l2.7-3.5c0.3-0.3,0.5-0.6,0.6-0.6l1.2,0
C37.9,25.2,37.8,25.4,37.6,25.8z"/>
</g>
</g>
</g>
<g>
<g>
<path class="car5" d="M23,31.8l0.5-1.4c-1.8-1.6-4.1-3.4-6.5-5.2c-0.2-0.1-0.4-0.1-0.6,0l-0.8,0.5c-0.1,0.1-0.1,0.3,0,0.4L23,31.8
z"/>
<path class="car5" d="M23.6,32.2l3.2,2.5c0.1,0.1,0.2,0.1,0.3,0.1l1,0.1c0.2,0,0.3-0.2,0.2-0.3c-0.7-0.6-2.2-2.1-4.2-3.9
L23.6,32.2z"/>
</g>
<g>
<path class="car6" d="M25.8,12.9l-0.3,0.9c-0.1,0.2,0,0.4,0.2,0.6c2.3,2,4.5,3.7,6.5,5.2l1.3-0.8l-7.3-5.9
C26,12.7,25.8,12.7,25.8,12.9z"/>
<path class="car6" d="M32.7,20c2.2,1.6,3.9,2.7,4.7,3.2c0.1,0.1,0.3-0.1,0.3-0.2l-0.3-0.9c0-0.1-0.1-0.2-0.2-0.3L34,19.2L32.7,20z
"/>
</g>
</g>
<g>
<path class="car0" d="M2.1,14.5c-0.5,0.6-0.6,1.3-0.5,2c0.1-0.1,0.2-0.1,0.3-0.3L4,13.6c0.3-0.4,0.3-1-0.1-1.3l0,0L2.1,14.5z"/>
<path class="car0" d="M13.6,1.3c-0.7,0-1.3,0.3-1.8,0.9L10,4.4l0,0c0.4,0.3,1,0.3,1.3-0.1l2.1-2.6C13.5,1.6,13.6,1.4,13.6,1.3z"/>
</g>
<g>
<polygon class="car1" points="13.6,3.7 20.5,11.4 13.1,4 "/>
<polygon class="car1" points="3.9,15.9 13,20.8 4,15.3 "/>
</g>
<rect x="22.5" y="20.5" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.175 31.9094)" class="car7" width="12" height="10"/>
<g>
<g>
<path class="car2" d="M29.4,32.3l-0.2,0.2c-0.1,0.1-0.2,0.1-0.2,0.1c-3.6-3.6-7-5.4-7.6-5.7c-0.1,0-0.1-0.1,0-0.2l0.2-0.2
c0.1-0.1,0.2-0.1,0.2-0.1c0.7,0.3,4.1,2.2,7.7,5.8C29.5,32.1,29.5,32.2,29.4,32.3z"/>
</g>
<g>
<path class="car2" d="M35.3,24.9l0.2-0.2c0.1-0.1,0.1-0.2,0-0.2c-4.3-2.7-6.8-5.6-7.3-6.2c0-0.1-0.1,0-0.2,0l-0.2,0.2
c-0.1,0.1-0.1,0.2-0.1,0.2c0.5,0.6,3.1,3.5,7.4,6.2C35.2,25,35.3,24.9,35.3,24.9z"/>
</g>
</g>
<g>
<rect x="20.3" y="22.8" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -8.3977 28.4661)" class="car2" width="10" height="0.3"/>
<rect x="21.9" y="24.1" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -8.7932 30.2181)" class="car2" width="10" height="0.3"/>
<rect x="23.5" y="25.4" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.1887 31.9701)" class="car2" width="10" height="0.3"/>
<rect x="25.2" y="26.6" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.5842 33.7222)" class="car2" width="10" height="0.3"/>
<rect x="26.8" y="27.9" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.9797 35.4742)" class="st2" width="10" height="0.3"/>
</g>
</g>
</symbol>
<style>
.car-container {
transform-origin: 606px 600px;
animation: rotate-right 6s linear 0s infinite;
}
#keyframes rotate-right {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<use href="#background">
</use>
<g class="car-container">
<use href="#car" width="174" height="174" class="car" transform="translate(210,281) rotate(80)"></use>
</g>
</svg>

I was interested in studying the issue you were having, and found this article.
https://css-tricks.com/svg-animation-on-css-transforms/
Even though it's now fairly clear to me that you're not using SMIL, here was my previous response (which is still good to have on-hand, in case it's needed):
I don't have tons of experience with what you're asking, however, "Can
I use..." is our friend. If you're referring to SMIL:
http://caniuse.com/#search=svg%20animation
According to their notes, this is not planned for Edge and will
eventually be dropped by Chrome. Also, here is an interesting page
that may help you - listing alternative, cross-compatible methods of
animating SVGs.
https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/

I was using animation on transform css attribute.
edge does not currently support transforms on svg.

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

SVG Animation Explanation - css

Related

moving svg circle using css animation

SVG - CSS - draw animation on certain svg path

How to hide overflow when sliding an element of an SVG in using keyframe animation?

Transform origin of nested element in complex SVG group

animation property on svg element doesn't work on edge 15

Categories

Resources