.carbody { fill:#000; animation: carbody 4s infinite ; }
#keyframes carbody {
0 { transform: rotate(0deg); }
25% { transform: rotate(1deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-1deg); }
100% { transform: rotate(0deg); }
}
.tireone{
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
display: block; animation:tireone 4s linear infinite;
}
#keyframes tireone { 100% { transform:rotate(360deg); } }
.tiretwo{fill:#a00;}
.wifidot{fill:#c00;}
.wifibarone{fill:#b00;}
.wifibartwo{fill:#d00;}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, 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 1000 826.5" style="enable-background:new 0 0 1000 826.5;" xml:space="preserve">
<path class="carbody" d="M190,717.3c-0.8-3.5-3.9-7.2-6.9-9.5c-71.8-53.1-76.7-150.9-10.1-210c22.3-19.8,48.9-30.5,78.6-31.3
c33.8-0.9,67.6,0,101.4-0.4c4.6-0.1,10.1-1.8,13.5-4.8c47.5-40.8,94.6-81.9,142-122.7c3.2-2.7,8.5-4.2,12.8-4.2
c90.4,0.2,180.8,0.6,271.2,1.3c4.4,0,9.6,2.7,12.9,5.7c49.9,45.6,99.5,91.4,149.3,137.2c1.6,1.4,3.6,2.3,5.4,3.5
c21.1,13.1,23.8,16.1,27.3,47.8c-0.3,19.8-0.9,39.7-1,59.5c-0.2,38.7-12.8,72.5-39.4,100.8c-5.5,5.9-12.1,10.8-19.6,17.5
c-2.1-61.2-26.4-108.8-74.9-142.9c-35.1-24.6-74.6-33.5-117.1-28.7c-82.2,9.2-162.8,86.7-148.7,197.2c-16.1-0.1-32-0.1-49-0.2
c0.2-3.1,0.2-5.8,0.6-8.5C553.6,600.5,433,502.2,314.5,542.3c-76.8,26-121,98.6-116.2,172.6"/>
<path class="wifibar" d="M337.3,45.5c3.8,6.8,6.4,13.9,5.4,22c-1.6,13.5-12.5,24.9-26,26.3c-6,0.6-12.1,0.4-18.2,0.5c-69.5,0.6-127.6,26.9-173.3,79
C88.1,215.6,69.9,265.6,69.5,322c-0.1,8.4,0.2,16.9,0,25.3c-0.4,14.5-8.6,25.3-22.1,29.3c-11.8,3.5-25.5-1.2-32.7-11.2
c-3.9-5.3-5.7-11.3-5.9-17.8c-0.9-36.4,1.4-72.5,12.1-107.6c11.4-37.5,29.4-71.5,54.6-101.7c39.2-46.9,88.2-78.6,147.2-94.8
c29.5-8.1,59.6-11.2,90.1-9.8c6.2,0.3,12.2,3.6,18.4,5.5C333.1,41.3,335.2,43.4,337.3,45.5z"/>
<path class="wifibar" d="M172.4,195.4c22-22.1,48-37.2,78.1-45.3c22.4-6,45.2-7.6,68.2-5.4c15.5,1.4,27.8,16.3,27.9,32.3c0.1,16.3-12.3,31-28.1,32.6
c-8.8,0.9-17.7,0.7-26.6,1.1c-31.6,1.4-57.7,14.2-78.1,38.2c-17.2,20.1-25.1,43.9-25.1,70.3c0,8,0.2,16,0,24
c-0.7,26.6-27.5,42.1-50.3,28.9c-10.4-6-15.9-15.5-16.2-27.4c-0.7-25.2-0.8-50.3,6.4-74.8C137.1,241.4,151.6,216.6,172.4,195.4z"/>
<path class="wifibartwo" d="M334,286.7c20.7,20.7,20.7,54.6,0,75.1c-20.8,20.7-54.6,20.6-75.2,0c-20.7-20.8-20.7-54.5,0-75.1
C279.6,266,313.3,266,334,286.7z"/>
<path class="tiretwo" d="M855.2,650c-31.3-54.9-100.3-74.5-154.3-43.9c-55.6,31.5-75.3,101.2-44,155.9c31.3,54.6,101.3,73.8,155.6,42.7
C866.9,773.6,886,704.2,855.2,650z M797.2,676.6c-13.5,0-24.5-11-24.5-24.5s11-24.5,24.5-24.5s24.5,11,24.5,24.5
S810.7,676.6,797.2,676.6z"/>
<path class="tireone" d="M467.4,647.1c-32.2-54.7-101.3-73.2-155.7-41.6c-54.3,31.5-73,101.1-41.8,154.8c32,54.9,101.2,73.9,155.5,42.5
C479.9,771.4,498.9,700.7,467.4,647.1z M416.3,782.4c-13.5,0-24.5-11-24.5-24.5s11-24.5,24.5-24.5s24.5,11,24.5,24.5
S429.8,782.4,416.3,782.4z"/>
</svg>
[![CSS transform rotate animation not working as a spinning wheel, When I apply transform rotate it dose not stay on its position. its just start rotating all over the screen. it should stay on its position and spin as a wheel ][1]][1]
you shouldn't need all that position absolute, top, bottom css on the tireone, the path itself is placing it where it needs to be. what you're looking for is transform-origin. right now defaults to the top left or something for you, so when it rotates around something it's rotating around that spot as the origin. you can set percentages to move where that spot is. (you can also use px but since you're using svg i would avoid that) in fiddling with the percentages i found that transform-origin: 37% 82%; got pretty close to what you probably want, but i'll let you dial it in from there
shout out to this SO post that got me on the right track
.carbody { fill:#000; animation: carbody 4s infinite ; }
#keyframes carbody {
0 { transform: rotate(0deg); }
25% { transform: rotate(1deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-1deg); }
100% { transform: rotate(0deg); }
}
.tireone{
animation:tireone 4s linear infinite;
transform-origin: 37% 82%;
}
#keyframes tireone { 100% { transform:rotate(360deg); } }
.tiretwo{fill:#a00;}
.wifidot{fill:#c00;}
.wifibarone{fill:#b00;}
.wifibartwo{fill:#d00;}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, 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 1000 826.5" style="enable-background:new 0 0 1000 826.5;" xml:space="preserve">
<path class="carbody" d="M190,717.3c-0.8-3.5-3.9-7.2-6.9-9.5c-71.8-53.1-76.7-150.9-10.1-210c22.3-19.8,48.9-30.5,78.6-31.3
c33.8-0.9,67.6,0,101.4-0.4c4.6-0.1,10.1-1.8,13.5-4.8c47.5-40.8,94.6-81.9,142-122.7c3.2-2.7,8.5-4.2,12.8-4.2
c90.4,0.2,180.8,0.6,271.2,1.3c4.4,0,9.6,2.7,12.9,5.7c49.9,45.6,99.5,91.4,149.3,137.2c1.6,1.4,3.6,2.3,5.4,3.5
c21.1,13.1,23.8,16.1,27.3,47.8c-0.3,19.8-0.9,39.7-1,59.5c-0.2,38.7-12.8,72.5-39.4,100.8c-5.5,5.9-12.1,10.8-19.6,17.5
c-2.1-61.2-26.4-108.8-74.9-142.9c-35.1-24.6-74.6-33.5-117.1-28.7c-82.2,9.2-162.8,86.7-148.7,197.2c-16.1-0.1-32-0.1-49-0.2
c0.2-3.1,0.2-5.8,0.6-8.5C553.6,600.5,433,502.2,314.5,542.3c-76.8,26-121,98.6-116.2,172.6"/>
<path class="wifibar" d="M337.3,45.5c3.8,6.8,6.4,13.9,5.4,22c-1.6,13.5-12.5,24.9-26,26.3c-6,0.6-12.1,0.4-18.2,0.5c-69.5,0.6-127.6,26.9-173.3,79
C88.1,215.6,69.9,265.6,69.5,322c-0.1,8.4,0.2,16.9,0,25.3c-0.4,14.5-8.6,25.3-22.1,29.3c-11.8,3.5-25.5-1.2-32.7-11.2
c-3.9-5.3-5.7-11.3-5.9-17.8c-0.9-36.4,1.4-72.5,12.1-107.6c11.4-37.5,29.4-71.5,54.6-101.7c39.2-46.9,88.2-78.6,147.2-94.8
c29.5-8.1,59.6-11.2,90.1-9.8c6.2,0.3,12.2,3.6,18.4,5.5C333.1,41.3,335.2,43.4,337.3,45.5z"/>
<path class="wifibar" d="M172.4,195.4c22-22.1,48-37.2,78.1-45.3c22.4-6,45.2-7.6,68.2-5.4c15.5,1.4,27.8,16.3,27.9,32.3c0.1,16.3-12.3,31-28.1,32.6
c-8.8,0.9-17.7,0.7-26.6,1.1c-31.6,1.4-57.7,14.2-78.1,38.2c-17.2,20.1-25.1,43.9-25.1,70.3c0,8,0.2,16,0,24
c-0.7,26.6-27.5,42.1-50.3,28.9c-10.4-6-15.9-15.5-16.2-27.4c-0.7-25.2-0.8-50.3,6.4-74.8C137.1,241.4,151.6,216.6,172.4,195.4z"/>
<path class="wifibartwo" d="M334,286.7c20.7,20.7,20.7,54.6,0,75.1c-20.8,20.7-54.6,20.6-75.2,0c-20.7-20.8-20.7-54.5,0-75.1
C279.6,266,313.3,266,334,286.7z"/>
<path class="tiretwo" d="M855.2,650c-31.3-54.9-100.3-74.5-154.3-43.9c-55.6,31.5-75.3,101.2-44,155.9c31.3,54.6,101.3,73.8,155.6,42.7
C866.9,773.6,886,704.2,855.2,650z M797.2,676.6c-13.5,0-24.5-11-24.5-24.5s11-24.5,24.5-24.5s24.5,11,24.5,24.5
S810.7,676.6,797.2,676.6z"/>
<path class="tireone" d="M467.4,647.1c-32.2-54.7-101.3-73.2-155.7-41.6c-54.3,31.5-73,101.1-41.8,154.8c32,54.9,101.2,73.9,155.5,42.5
C479.9,771.4,498.9,700.7,467.4,647.1z M416.3,782.4c-13.5,0-24.5-11-24.5-24.5s11-24.5,24.5-24.5s24.5,11,24.5,24.5
S429.8,782.4,416.3,782.4z"/>
</svg>
When I try to animate an SVG text with a CSS keyframe animation, it won't animate the transform properties. Animating the fill property works in the same animation. So the animation gets executed.
the transform outside of the animation works, so I have no idea why it doesn't work in the animation.
the code only has to work in Chrome.
my SVG(snippet):
<text x="274.546" y="331.6133" id="Voer" class="st14 st15 clickable">Voer</text>
my CSS code :
#-webkit-keyframes pulse {
0% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
fill: #ff4a4a;
-webkit-transform: translate(0, -20px);
transform: translate(0, -20px);
}
75% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
#keyframes pulse {
0% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
fill: #ff4a4a;
-webkit-transform: translate(0, -20px);
transform: translate(0, -20px);
}
75% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.clickable {
-webkit-animation: pulse 3s infinite ;
animation: pulse 3s infinite ;
-webkit-transform: translate(0, -20px);
-ms-transform: translate(0, -20px);
transform: translate(0, -20px);
}
fiddle with recreated problem: https://jsfiddle.net/17ecnuLu/
#-webkit-keyframes pulse {
0% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
fill: #ff4a4a;
-webkit-transform: translate(0, -20px);
transform: translate(0, -20px);
}
75% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
#keyframes pulse {
0% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
fill: #ff4a4a;
-webkit-transform: translate(0, -20px);
transform: translate(0, -20px);
}
75% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
fill: #000000;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.clickable {
-webkit-animation: pulse 3s infinite ;
animation: pulse 3s infinite ;
-webkit-transform: translate(0, -20px);
-ms-transform: translate(0, -20px);
transform: translate(0, -20px);
}
/*SVG MARKUP */
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.st0{opacity:0.3;fill:#CBDB2A;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#306F9C;}
.st2{fill:none;stroke:#306F9C;stroke-width:0.144;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#1ABECB;stroke:#1ABECB;stroke-miterlimit:10;}
.st4{fill:none;stroke:#1ABECB;stroke-width:0.144;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st5{fill:#1ABECB;stroke:#1ABECB;stroke-width:0.144;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st6{font-family:'HWTArtz';}
.st7{font-size:5.52px;}
.st8{font-size:5.4223px;}
.st9{fill-rule:evenodd;clip-rule:evenodd;fill:#1ABECB;}
.st10{fill:none;stroke:#1ABECB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st11{font-family:'MuseoSansRounded-700';}
.st12{font-size:20px;}
.st13{letter-spacing:1;}
.st14{font-family:'MuseoSansRounded-1000';}
.st15{font-size:12px;}
.st16{fill-rule:evenodd;clip-rule:evenodd;fill:#E11B22;stroke:#DD1F26;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st17{fill:#E11B22;stroke:#DD1F26;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st18{fill:#D1D3D4;}
.st19{font-size:10px;}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 831 442.7" style="enable-background:new 0 0 831 442.7;" xml:space="preserve">
<g id="Zoniënwoud">
<polygon class="st0" points="535,442.7 535,440.3 531.6,437.2 531.6,433.4 527.8,425 531.1,419.2 537.4,410.8 537.4,394.5
528,360.9 526.3,347.7 539.8,339.8 539.8,329.5 548.7,324.4 544.6,317.5 544.6,304.5 544.6,280.7 552.7,254.8 557.5,251.9
557.5,238.5 577,232.5 581.1,256.3 575.5,259.4 577,269 582.5,272.1 593.5,263.7 584.4,235.6 578.4,201.5 567.1,170.8 548.2,180.7
540.3,153.1 548.9,144.2 546,125 547.7,116.8 570,102.4 582,132.7 593.8,135.8 606.5,134.3 606.5,131.7 597.6,125.2 591.1,113.9
589.2,104.1 602.9,83.7 613.5,72.9 610.3,69.8 603.9,56.1 592.6,40.7 585.9,29.2 577.9,15.3 563.1,6.9 554.4,11.9 545.5,19.4
537.6,23.7 522,25.1 514.8,21.1 500.2,19.4 425.1,49.4 418.8,47 412.6,54.7 395.5,61.1 351.4,77.7 361,112.7 362.7,120.4
376.1,143.7 394.1,165.8 434.9,165.8 463.7,201.8 463.7,209 449.8,229.1 439.2,229.1 407.8,267.3 404.2,267.3 397.5,259.4
394.3,249.1 389.1,238 381.4,230.6 370.6,241.4 360.3,235.4 357.4,238 348,236.3 340.1,244.3 332.2,239.7 318,247.9 310.8,240.7
302.7,248.8 312.7,262.5 306.7,278.3 310.1,284.1 309.4,288.7 285.6,294.2 262.8,301.1 257.8,272.1 249.4,272.1 249.4,259.6
242.2,259.6 238.1,252.2 235.2,250.5 225.9,255.8 220.3,245.9 214.8,246.7 205.7,237.5 199,235.6 191.5,239.7 185.3,239.7
165.4,259.6 160.8,256.7 141.6,278.6 124.6,268.7 102,287.9 "/>
</g>
<g id="Water">
<path class="st1" d="M614,36.2L614,36.2c0.5-0.2,1-0.3,1.6-0.3h5.3c0.1,0,0.3,0,0.4,0l0,0c0.1,0,0.1,0,0.2,0c0.2,0,0.4,0.1,0.6,0.1
c2.6,0.6,4.3,0.9,5.2,1c1,0.1,2.9-0.2,5.6-1l1.1-0.7l6.5-2.2l17-1.4l24.7-3.1h13l23.2,3.1h11.6l17.6-4l20.4-6l17.6-3.7l23.5-2.6
l21-3.7l0.2,1.4l-21,3.7l-23.5,2.5l-17.5,3.7L748,29.1l-17.8,4h-11.9L695.1,30h-12.9l-24.6,3.1l-16.9,1.4l-6.2,2.1l-1.4,0.8
c-0.6,0.3-1.2,0.8-1.8,1.5c-0.7,0.7-1.5,1.9-2.5,3.6c-1,1.7-2.1,3.2-3.3,4.4l-1.8,1.1l-14.9,9.6l-2.3,0.6l-1.1-1.1v-1.4l4.4-5.2
c0.7-0.9,1-1.7,0.9-2.6c-0.4-0.3-1.1-0.5-1.9-0.6h-6.2l-1.3-8.1l6.4-0.6L614,36.2"/>
<path class="st2" d="M614,36.2L614,36.2c0.5-0.2,1-0.3,1.6-0.3h5.3c0.1,0,0.3,0,0.4,0l0,0c0.1,0,0.1,0,0.2,0c0.2,0,0.4,0.1,0.6,0.1
c2.6,0.6,4.3,0.9,5.2,1c1,0.1,2.9-0.2,5.6-1l1.1-0.7l6.5-2.2l17-1.4l24.7-3.1h13l23.2,3.1h11.6l17.6-4l20.4-6l17.6-3.7l23.5-2.6
l21-3.7l0.2,1.4l-21,3.7l-23.5,2.5l-17.5,3.7L748,29.1l-17.8,4h-11.9L695.1,30h-12.9l-24.6,3.1l-16.9,1.4l-6.2,2.1l-1.4,0.8
c-0.6,0.3-1.2,0.8-1.8,1.5c-0.7,0.7-1.5,1.9-2.5,3.6c-1,1.7-2.1,3.2-3.3,4.4l-1.8,1.1l-14.9,9.6l-2.3,0.6l-1.1-1.1v-1.4l4.4-5.2
c0.7-0.9,1-1.7,0.9-2.6c-0.4-0.3-1.1-0.5-1.9-0.6h-6.2l-1.3-8.1l6.4-0.6L614,36.2"/>
<path class="st1" d="M597.2,64.3c0-0.4,0.5-1.3,1.6-2.5c1.1-1.2,1.9-2.1,2.6-2.8c0.6-0.6,1.2-1.1,1.6-1.3c0.5-0.3,0.8-0.3,1.1,0
c0.3,0.3,0.4,0.7,0.4,1.2c0,0.5-0.2,1.1-0.5,1.6c-0.3,0.6-1,1.2-2,2c-1,0.8-1.8,1.4-2.3,2c-0.6,0.6-1.1,0.8-1.6,0.6
C597.5,65,597.3,64.7,597.2,64.3"/>
<path class="st2" d="M597.2,64.3c0-0.4,0.5-1.3,1.6-2.5c1.1-1.2,1.9-2.1,2.6-2.8c0.6-0.6,1.2-1.1,1.6-1.3c0.5-0.3,0.8-0.3,1.1,0
c0.3,0.3,0.4,0.7,0.4,1.2c0,0.5-0.2,1.1-0.5,1.6c-0.3,0.6-1,1.2-2,2c-1,0.8-1.8,1.4-2.3,2c-0.6,0.6-1.1,0.8-1.6,0.6
C597.5,65,597.3,64.7,597.2,64.3"/>
<polyline class="st1" points="554.2,100.5 559.2,97.6 565.7,91.1 570,83.7 577,75.3 583.7,70 585.6,69.8 587.5,71.9 589.9,74.1
590.4,75.3 589.2,76 584.9,78.7 582,82.3 579.6,88.3 577.9,90.2 574.8,91.9 572.4,94.5 568.8,97.9 560.7,104.8 556.8,105.8
555.1,104.8 553.5,101.9 553.2,101 554.2,100.5 "/>
<polygon class="st2" points="554.2,100.5 559.2,97.6 565.7,91.1 570,83.7 577,75.3 583.7,70 585.6,69.8 587.5,71.9 589.9,74.1
590.4,75.3 589.2,76 584.9,78.7 582,82.3 579.6,88.3 577.9,90.2 574.8,91.9 572.4,94.5 568.8,97.9 560.7,104.8 556.8,105.8
555.1,104.8 553.5,101.9 553.2,101 "/>
<path class="st3" d="M614,36.2L614,36.2c0.5-0.2,1-0.3,1.6-0.3h5.3c0.1,0,0.3,0,0.4,0l0,0c0.1,0,0.1,0,0.2,0c0.2,0,0.4,0.1,0.6,0.1
c2.6,0.6,4.3,0.9,5.2,1c1,0.1,2.9-0.2,5.6-1l1.1-0.7l6.5-2.2l17-1.4l24.7-3.1h13l23.2,3.1h11.6l17.6-4l20.4-6l17.6-3.7l23.5-2.6
l21-3.7l0.2,1.4l-21,3.7l-23.5,2.5l-17.5,3.7L748,29.1l-17.8,4h-11.9L695.1,30h-12.9l-24.6,3.1l-16.9,1.4l-6.2,2.1l-1.4,0.8
c-0.6,0.3-1.2,0.8-1.8,1.5c-0.7,0.7-1.5,1.9-2.5,3.6c-1,1.7-2.1,3.2-3.3,4.4l-1.8,1.1l-14.9,9.6l-2.3,0.6l-1.1-1.1v-1.4l4.4-5.2
c0.7-0.9,1-1.7,0.9-2.6c-0.4-0.3-1.1-0.5-1.9-0.6h-6.2l-1.3-8.1l6.4-0.6L614,36.2"/>
<path class="st4" d="M614,36.2L614,36.2c0.5-0.2,1-0.3,1.6-0.3h5.3c0.1,0,0.3,0,0.4,0l0,0c0.1,0,0.1,0,0.2,0c0.2,0,0.4,0.1,0.6,0.1
c2.6,0.6,4.3,0.9,5.2,1c1,0.1,2.9-0.2,5.6-1l1.1-0.7l6.5-2.2l17-1.4l24.7-3.1h13l23.2,3.1h11.6l17.6-4l20.4-6l17.6-3.7l23.5-2.6
l21-3.7l0.2,1.4l-21,3.7l-23.5,2.5l-17.5,3.7L748,29.1l-17.8,4h-11.9L695.1,30h-12.9l-24.6,3.1l-16.9,1.4l-6.2,2.1l-1.4,0.8
c-0.6,0.3-1.2,0.8-1.8,1.5c-0.7,0.7-1.5,1.9-2.5,3.6c-1,1.7-2.1,3.2-3.3,4.4l-1.8,1.1l-14.9,9.6l-2.3,0.6l-1.1-1.1v-1.4l4.4-5.2
c0.7-0.9,1-1.7,0.9-2.6c-0.4-0.3-1.1-0.5-1.9-0.6h-6.2l-1.3-8.1l6.4-0.6L614,36.2"/>
<path class="st1" d="M597.2,64.3c0-0.4,0.5-1.3,1.6-2.5c1.1-1.2,1.9-2.1,2.6-2.8c0.6-0.6,1.2-1.1,1.6-1.3c0.5-0.3,0.8-0.3,1.1,0
c0.3,0.3,0.4,0.7,0.4,1.2c0,0.5-0.2,1.1-0.5,1.6c-0.3,0.6-1,1.2-2,2c-1,0.8-1.8,1.4-2.3,2c-0.6,0.6-1.1,0.8-1.6,0.6
C597.5,65,597.3,64.7,597.2,64.3"/>
<path class="st5" d="M597.2,64.3c0-0.4,0.5-1.3,1.6-2.5c1.1-1.2,1.9-2.1,2.6-2.8c0.6-0.6,1.2-1.1,1.6-1.3c0.5-0.3,0.8-0.3,1.1,0
c0.3,0.3,0.4,0.7,0.4,1.2c0,0.5-0.2,1.1-0.5,1.6c-0.3,0.6-1,1.2-2,2c-1,0.8-1.8,1.4-2.3,2c-0.6,0.6-1.1,0.8-1.6,0.6
C597.5,65,597.3,64.7,597.2,64.3"/>
<polyline class="st3" points="554.2,100.5 559.2,97.6 565.7,91.1 570,83.7 577,75.3 583.7,70 585.6,69.8 587.5,71.9 589.9,74.1
590.4,75.3 589.2,76 584.9,78.7 582,82.3 579.6,88.3 577.9,90.2 574.8,91.9 572.4,94.5 568.8,97.9 560.7,104.8 556.8,105.8
555.1,104.8 553.5,101.9 553.2,101 554.2,100.5 "/>
<polygon class="st4" points="554.2,100.5 559.2,97.6 565.7,91.1 570,83.7 577,75.3 583.7,70 585.6,69.8 587.5,71.9 589.9,74.1
590.4,75.3 589.2,76 584.9,78.7 582,82.3 579.6,88.3 577.9,90.2 574.8,91.9 572.4,94.5 568.8,97.9 560.7,104.8 556.8,105.8
555.1,104.8 553.5,101.9 553.2,101 "/>
<text transform="matrix(1.0117 0 0 1 658.5792 51.0534)" class="st6 st7"> </text>
<text transform="matrix(1 0 0 1.018 669.1387 51.0534)" class="st6 st8"> </text>
<polyline class="st9" points="566.7,26.8 562.1,27.3 557.8,26.6 554.7,26.8 552.3,28.3 547.7,31.6 542.7,34.7 537.6,36.7
531.1,40.3 524.2,43.9 521.1,45.8 495.9,56.8 484.6,60.7 454.1,78.2 447.6,83.7 432.3,95.7 411.1,107.9 400.6,111.5 398.2,112.7
397.2,113.5 378,140.3 362.4,167.5 340.3,193.9 328.3,200.8 305.5,223.6 303.6,230.6 309.4,240.7 309.9,242.8 308.4,246.7
308.4,247.6 308.9,250 315.6,258.7 316.8,262.7 316.8,266.8 316.1,272.6 315.6,276.4 315.6,281 315.1,286 315.6,288.7 319,297.1
319.7,301.6 319,307.4 317.1,313.6 314.7,320.6 313.7,324.2 312,336.4 312,344.1 309.6,357.8 309.6,366.2 306.5,376.3 306,385.6
306,399.3 298.3,413.5 297.1,413 304.6,399.1 304.6,385.6 305.1,376 308.2,365.9 308.2,357.8 310.6,344.1 310.6,336.4 312.5,323.9
313.5,320.1 315.9,313.1 317.5,306.9 318.3,301.9 317.5,297.5 314.2,288.9 313.7,286.3 314.2,281 314.2,276.4 314.7,272.3
315.6,266.6 315.6,263 314.2,259.4 307.5,250.7 307,247.6 307.2,246.2 308.4,242.8 307.9,241.1 301.9,230.8 304.3,222.9
327.6,199.6 339.4,192.7 361.2,166.7 376.8,139.4 396.3,112.5 379.2,116.1 370.3,118.5 360.3,119.9 353.1,120.7 331.7,113.9
307.5,112.5 275.1,120.7 240,129.1 213.4,129.1 213.6,129.3 212.4,129.1 209.3,129.1 203.3,130 167.1,144.2 123.4,160 90.3,167.5
59.5,175.4 41.8,179.2 15.6,183.3 0.5,183.3 0.5,182.1 15.4,182.1 41.5,177.8 59.1,173.9 90,166 122.9,158.8 166.6,143
202.8,128.6 209.1,127.6 239.8,127.6 274.8,119.5 307.2,111.1 332.2,112.5 353.1,119.2 360,118.5 370.1,117.1 379,114.7
400.3,110.3 410.4,106.5 431.5,94.5 446.7,82.7 453.4,77 483.9,59.2 495.1,55.4 520.3,44.6 523.5,42.7 528.7,39.1 533.3,34.5
539.1,32.8 546.3,28.5 549.6,24.4 553.9,21.3 558.7,21.1 565.9,22.7 571.5,26.8 578.9,32.6 580.6,35.7 580.6,42.9 582.7,42.9
587.8,42.2 594.5,40 600,39.3 601.2,47.9 594.3,49.9 588,51.5 585.4,51.5 584.2,51.3 580.6,47.5 579.1,45.3 579.1,35.9 577.7,33.5
570.5,28 568.3,27.1 566.7,26.8 "/>
<polygon class="st10" points="566.7,26.8 562.2,27.3 557.8,26.6 554.7,26.8 552.3,28.3 547.8,31.6 542.7,34.7 537.7,36.7
531.2,40.3 524.3,43.9 521.2,45.8 496,56.8 484.8,60.7 454.3,78.2 447.9,83.7 432.5,95.7 411.4,107.9 400.9,111.5 398.5,112.7
397.5,113.5 378.4,140.3 362.8,167.5 340.7,193.9 328.8,200.8 306,223.6 304.1,230.6 309.8,240.7 310,242.8 308.3,246.7
308.3,247.6 309,250 315.9,258.7 317.3,262.7 317.3,266.8 316.6,272.6 316.3,276.4 316.3,281 315.7,286 316.1,288.7 319.4,297.1
320.1,301.6 319.4,307.4 317.5,313.6 315.1,320.6 314,324.2 312.3,336.4 312.3,344.1 310.3,357.8 310.3,366.2 306.9,376.3
306.3,385.6 306.3,399.3 298.7,413.5 297.7,413 305.3,399.1 305.3,385.6 305.4,376 308.3,365.9 308.3,357.8 311.3,344.1
311.3,336.4 313.1,323.9 314,320.1 316.3,313.1 318,306.9 318.7,301.9 318,297.5 314.6,288.9 314,286.3 314.3,281 314.3,276.4
315,272.3 316.3,266.6 316.3,263 314.7,259.4 308,250.7 307.5,247.6 307.7,246.2 308.9,242.8 308.4,241.1 302.4,230.8 304.8,222.9
328,199.6 339.8,192.7 361.6,166.7 377.2,139.4 396.6,112.5 379.6,116.1 370.7,118.5 360.6,119.9 353.4,120.7 332.1,113.9
307.9,112.5 275.6,120.7 240.6,129.1 214,129.1 214.2,129.4 213,129.1 209.9,129.1 203.9,130 167.7,144.2 124.1,160 91,167.5
60.4,175.4 42.6,179.1 16.5,183.1 0.5,183.1 0.5,182.1 16.3,182.1 42.4,177.8 59.9,173.9 90.8,166 123.6,158.8 167.2,143
203.4,128.8 209.7,128.1 240.3,128.1 275.3,119.7 307.7,111.2 332.6,112.6 353.4,119.2 360.4,118.5 370.5,117.1 379.3,114.7
400.6,110.3 410.7,106.5 431.8,94.5 446.9,82.7 453.6,77 484,59.2 495.3,55.4 520.5,44.6 523.6,42.7 528.9,39.1 533.4,34.5
539.2,32.8 546.3,28.5 549.7,24.4 554,21.3 558.8,21.1 566,22.7 571.5,26.8 579.2,32.6 581.1,35.7 581.1,43.1 582.8,43.1
587.8,42.3 594.5,40.1 600,39.3 601.2,47.9 594.3,49.7 588,51.1 585.4,51.1 584.2,51.1 580.6,47.3 579.1,45.3 579.1,35.9
577.7,33.5 570.5,28 568.4,27.1 "/>
</g>
<g id="Gebouwen">
</g>
<g id="Namen">
<text transform="matrix(1 0 0 1 272.5991 151.6133)" class="st11 st12 st13">Fura</text>
<text transform="matrix(1 0 0 1 218.0431 188.6133)" class="st14 st15">Sint-Jan-de-Doper</text>
<g>
<g>
<polygon class="st16" points="305.9,158.2 303,155.3 300.1,158.2 300.5,158.7 300.5,162.6 305.4,162.6 305.4,158.7 "/>
<polygon class="st16" points="311,161.9 308.1,159 305.1,161.9 305.6,162.3 305.6,166.3 310.5,166.3 310.5,162.3 "/>
</g>
<g>
<polygon class="st16" points="291.6,158.2 288.7,155.3 285.8,158.2 286.3,158.7 286.3,162.6 291.2,162.6 291.2,158.7 "/>
<polygon class="st16" points="286.1,161.9 283.2,159 280.3,161.9 280.8,162.3 280.8,166.3 285.7,166.3 285.7,162.3 "/>
</g>
<polygon class="st16" points="299,165.5 296.1,162.6 293.1,165.5 293.6,166 293.6,169.9 298.5,169.9 298.5,166 "/>
</g>
<path class="st16" d="M332,182.7"/>
<g>
<polygon class="st16" points="334,184.8 331.1,181.9 328.2,184.8 328.7,185.3 328.7,189.2 333.6,189.2 333.6,185.3 "/>
<g>
<line class="st16" x1="331.1" y1="178.1" x2="331.1" y2="183.7"/>
<line class="st16" x1="329.7" y1="179.4" x2="332.5" y2="179.4"/>
</g>
</g>
<circle class="st17" cx="312.5" cy="328.6" r="3.2"/>
</g>
<g id="Referentiepunten">
<text transform="matrix(0.95 -0.3121 0.3121 0.95 122.4505 152.4042)" class="st18 st11 st19">Maalbeek</text>
<text transform="matrix(1 0 0 1 453.4195 212.28)" class="st18 st11 st12 st13">Zoniënwoud</text>
<text transform="matrix(1 0 0 1 593.3998 16.9999)" class="st18 st11 st12 st13">Vossem</text>
<g>
<text x="274.546" y="331.6133" id="Voer" class="st14 st15 clickable">Voer</text>
</g>
</g>
</svg>
You can achieve this if you set the animation for the position on the parent SVG, and the animation for the color on the text element.
See https://jsfiddle.net/cgbqq0f6/
EDIT:
After some experimentation, it looks like you can't use css transform animations on path or text elements. You can, however, apply these to a wrapper element (such as a generic g tag, or a specific one if tied to an ID or class):
#-webkit-keyframes pulse {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(0, -20px);
transform: translate(0, -20px);
}
75% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
#keyframes pulse {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(0, -20px);
transform: translate(0, -20px);
}
75% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
#-webkit-keyframes colorText {
0% {
fill: #000000;
}
25% {
fill: #000000;
}
50% {
fill: #ff4a4a;
}
75% {
fill: #000000;
}
100% {
fill: #000000;
}
}
#keyframes colorText {
0% {
fill: #000000;
}
25% {
fill: #000000;
}
50% {
fill: #ff4a4a;
}
75% {
fill: #000000;
}
100% {
fill: #000000;
}
}
.animatable {
position: relative;
fill: #000;
-webkit-animation: pulse 3s infinite ;
animation: pulse 3s infinite ;
}
g.animatable {
position: relative;
fill: #000;
-webkit-animation: pulse 2s infinite ;
animation: pulse 2s infinite ;
}
.animatable text {
-webkit-animation: colorText 3s infinite ;
animation: colorText 3s infinite ;
}
<svg height="60" width="200" id="voer">
<text x="0" y="15" fill="red" class="animatable">Voer</text>
<g class="animatable"><text x="0" y="30" fill="red" class="two">Another</text></g>
<g class="animatable">
<path d="M150 0 L75 200 L225 200 Z" />
</g>
</svg>
You can see in the example that although the first text element has the animatable class, it doesn't move - that's because we're trying to animate the text element directly. The second one does move, because the animatable class is on a wrapping g element, so the animation get applied to that.
If you wrap your text elements in another tag as per the example, you should be able to animate them using the methods you're currently using.