css keyframes animation with transform not working on SVG - css
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.
Related
CSS transform rotate animation not working as a spinning wheel
.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>
Dripping SVG clip-path on animation
In the following example, I apply a clip-path and animate a block in that path to simulate pouring. The issue is, while it looks like it's rendering well in Safari, we can see the box boundaries of the animated path in Chrome. Any idea why, and how to get rid of them?
.fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 2s;
fill: #300f0f;
}
#keyframes fillAction {
0% {
transform: translate(0, 700px);
}
100% {
transform: translate(0, 250px);
}
}
#keyframes waveAction {
0% {
transform: translate(380px, 0);
}
100% {
transform: translate(-235px, 0);
}
}
<svg class="h-full w-full" viewBox="0 0 1500 1500">
<defs>
<clipPath id="drop">
<path d="M 537.5,714.5 C 744.168,714.167 950.834,714.5 1157.5,715.5C 1170.62,825.317 1137.29,918.15 1057.5,994C 970.54,1067.47 871.54,1090.14 760.5,1062C 667.845,1033.01 601.012,974.512 560,886.5C 536.431,831.281 528.931,773.948 537.5,714.5 Z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill">
<path
id="waveShape"
d="M 265.5,488.5 C 265.897,487.475 266.563,487.308 267.5,488C 266.906,488.464 266.239,488.631 265.5,488.5 Z M 888.5,488.5 C 888.897,487.475 889.563,487.308 890.5,488C 889.906,488.464 889.239,488.631 888.5,488.5 Z M 248.5,490.5 C 258.172,490.334 267.839,490.5 277.5,491C 292.931,492.686 308.264,495.019 323.5,498C 340.141,499.478 356.808,499.811 373.5,499C 407.587,492.498 441.92,490.831 476.5,494C 502.019,497.965 527.686,500.132 553.5,500.5C 564.855,500.46 576.188,499.96 587.5,499C 618.82,494.292 650.32,492.126 682,492.5C 705.194,492.581 728.36,493.414 751.5,495C 769.224,497.858 787.058,499.692 805,500.5C 827.502,499.666 849.668,496.5 871.5,491C 884.529,490.231 897.529,490.564 910.5,492C 922.5,494 934.5,496 946.5,498C 963.141,499.478 979.808,499.811 996.5,499C 1030.59,492.498 1064.92,490.831 1099.5,494C 1125.02,497.965 1150.69,500.132 1176.5,500.5C 1187.86,500.46 1199.19,499.96 1210.5,499C 1259.65,492.451 1308.99,490.784 1358.5,494C 1371.26,494.455 1383.93,495.788 1396.5,498C 1395.48,498.519 1394.82,499.353 1394.5,500.5C 1395.5,753.146 1395.83,1005.81 1395.5,1258.5C 978.833,1258.5 562.167,1258.5 145.5,1258.5C 145.5,1004.83 145.5,751.167 145.5,497.5C 180.445,502.459 214.778,500.126 248.5,490.5 Z"
/>
</g>
</g>
</svg>
As a possible solution you can use a mask instead:
.fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 2s;
fill: #300f0f;
}
#keyframes fillAction {
0% {
transform: translate(0, 700px);
}
100% {
transform: translate(0, 250px);
}
}
#keyframes waveAction {
0% {
transform: translate(380px, 0);
}
100% {
transform: translate(-235px, 0);
}
}
<svg class="h-full w-full" viewBox="0 500 1500 1000">
<defs>
<mask id="drop">
<rect y="500" width="1500" height="1000" />
<path d="M 537.5,714.5 C 744.168,714.167 950.834,714.5 1157.5,715.5C 1170.62,825.317 1137.29,918.15 1057.5,994C 970.54,1067.47 871.54,1090.14 760.5,1062C 667.845,1033.01 601.012,974.512 560,886.5C 536.431,831.281 528.931,773.948 537.5,714.5 Z" fill="white" />
</mask>
</defs>
<g mask="url(#drop)">
<g class="fill">
<path
id="waveShape"
d="M 265.5,488.5 C 265.897,487.475 266.563,487.308 267.5,488C 266.906,488.464 266.239,488.631 265.5,488.5 Z M 888.5,488.5 C 888.897,487.475 889.563,487.308 890.5,488C 889.906,488.464 889.239,488.631 888.5,488.5 Z M 248.5,490.5 C 258.172,490.334 267.839,490.5 277.5,491C 292.931,492.686 308.264,495.019 323.5,498C 340.141,499.478 356.808,499.811 373.5,499C 407.587,492.498 441.92,490.831 476.5,494C 502.019,497.965 527.686,500.132 553.5,500.5C 564.855,500.46 576.188,499.96 587.5,499C 618.82,494.292 650.32,492.126 682,492.5C 705.194,492.581 728.36,493.414 751.5,495C 769.224,497.858 787.058,499.692 805,500.5C 827.502,499.666 849.668,496.5 871.5,491C 884.529,490.231 897.529,490.564 910.5,492C 922.5,494 934.5,496 946.5,498C 963.141,499.478 979.808,499.811 996.5,499C 1030.59,492.498 1064.92,490.831 1099.5,494C 1125.02,497.965 1150.69,500.132 1176.5,500.5C 1187.86,500.46 1199.19,499.96 1210.5,499C 1259.65,492.451 1308.99,490.784 1358.5,494C 1371.26,494.455 1383.93,495.788 1396.5,498C 1395.48,498.519 1394.82,499.353 1394.5,500.5C 1395.5,753.146 1395.83,1005.81 1395.5,1258.5C 978.833,1258.5 562.167,1258.5 145.5,1258.5C 145.5,1004.83 145.5,751.167 145.5,497.5C 180.445,502.459 214.778,500.126 248.5,490.5 Z"
/>
</g>
</g>
</svg>
I've changed the viewBox of the svg element because I wanted the animation in the view but you can change it back to what you want.
How to rotate an icon at the end of animation?
I found the following example https://codepen.io/lonekorean/pen/vYLNpoY to make the basic animation. But how can I rotate the icon used in the #keyframes duck animation at the end of #keyframes move animation.
.duck svg {
height: 100px;
}
.duck {
animation: duck .2s linear infinite alternate;
}
.move {
animation: move 10s linear infinite alternate;
}
#keyframes duck {
from {
transform: translateY(-7px);
}
to {
transform: translateY(0px);
}
}
#keyframes move {
from {
transform: translateX(0) ;
}
to {
transform: translateX(400px) ;
}
}
<div class="box move">
<div class="duck">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001" xml:space="preserve"><path d="M492.977 219.06c-11.854-6.513-25.73-6.081-37.119 1.151-32.916 20.896-79.957 30.239-136.975 27.373 12.867-20.341 19.778-43.956 19.778-68.435 0-70.739-57.551-128.291-128.29-128.291-67.26.002-122.524 51.371-127.858 117.721-10.914 10.909-37.836 34.276-71.473 38.288a12.521 12.521 0 0 0-7.725 20.921c1.592 1.727 37.457 39.74 105.634 39.738 2.705 0 5.468-.068 8.276-.192.526.556 1.044 1.121 1.58 1.667-19.416 20.845-30.445 48.099-30.664 76.66-.224 30.788 11.594 59.774 33.278 81.615 21.682 21.84 50.568 33.867 81.338 33.867h155.517c50.332 0 91.082-19.931 117.84-57.636C499.591 370.425 512 324.207 512 269.846v-18.648a36.671 36.671 0 0 0-19.023-32.138zM41.04 225.209c17.138-6.245 31.695-15.589 42.887-24.412a128.208 128.208 0 0 0 14.704 41.344c-25.533-1.704-44.748-9.525-57.591-16.932zm445.914 44.638c0 49.136-10.812 90.342-31.265 119.164-22.173 31.244-54.948 47.086-97.414 47.086H202.757c-24.045 0-46.62-9.399-63.563-26.467-16.946-17.07-26.182-39.723-26.006-63.781.199-25.927 11.87-50.51 32.015-67.442a12.528 12.528 0 0 0 4.465-9.678 12.516 12.516 0 0 0-4.605-9.612 103.705 103.705 0 0 1-13.091-12.79l-.005-.006c-16.028-18.66-24.854-42.515-24.854-67.17 0-1.628.035-3.11.113-4.625 2.423-55.299 47.73-98.618 103.148-98.618 56.928 0 103.243 46.315 103.243 103.244 0 26.306-9.92 51.373-27.934 70.583a12.521 12.521 0 0 0 7.868 21.026c72.976 7.425 133.734-2.74 175.735-29.401 5.133-3.261 9.843-1.328 11.629-.346 1.816.998 6.039 3.989 6.039 10.187v18.646z"/><path d="M302.82 374.732h-10.432c-6.915 0-12.523 5.607-12.523 12.524s5.607 12.524 12.523 12.524h10.432c6.916 0 12.524-5.607 12.524-12.524s-5.609-12.524-12.524-12.524zM425.577 324.05c-5.768-3.817-13.538-2.238-17.355 3.53-13.842 20.912-34.649 36.216-58.586 43.091-6.649 1.91-10.488 8.847-8.58 15.494 1.576 5.494 6.585 9.07 12.029 9.07 1.145 0 2.309-.158 3.464-.49 29.662-8.52 55.429-27.463 72.559-53.34 3.816-5.767 2.236-13.538-3.531-17.355zM179.087 126.365c-6.916 0-12.524 5.607-12.524 12.524v31.434c0 6.917 5.608 12.524 12.524 12.524s12.524-5.607 12.524-12.524v-31.434c0-6.917-5.608-12.524-12.524-12.524z"/></svg>
</div>
</div>
Maybe this is what you're looking for?
.duck {
width: 100px;
height: 100px;
animation: duck .2s linear infinite alternate;
}
.duck svg {
width: 100px;
height: 100px;
}
.duck-rotation {
width: 100px;
height: 100px;
animation: duck-rotation 20s linear infinite;
transform-origin: center;
}
.move {
width: 100px;
height: 100px;
animation: move 10s linear infinite alternate;
}
#keyframes duck {
from {
transform: translateY(-7px);
}
to {
transform: translateY(0px);
}
}
#keyframes duck-rotation {
0% {
transform: rotateY(180deg);
}
49% {
transform: rotateY(180deg);
}
50% {
transform: rotateY(0deg);
}
99% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
#keyframes move {
from {
transform: translateX(0) ;
}
to {
transform: translateX(400px) ;
}
}
<div class="box move">
<div class="duck-rotation">
<div class="duck">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001" xml:space="preserve"><path d="M492.977 219.06c-11.854-6.513-25.73-6.081-37.119 1.151-32.916 20.896-79.957 30.239-136.975 27.373 12.867-20.341 19.778-43.956 19.778-68.435 0-70.739-57.551-128.291-128.29-128.291-67.26.002-122.524 51.371-127.858 117.721-10.914 10.909-37.836 34.276-71.473 38.288a12.521 12.521 0 0 0-7.725 20.921c1.592 1.727 37.457 39.74 105.634 39.738 2.705 0 5.468-.068 8.276-.192.526.556 1.044 1.121 1.58 1.667-19.416 20.845-30.445 48.099-30.664 76.66-.224 30.788 11.594 59.774 33.278 81.615 21.682 21.84 50.568 33.867 81.338 33.867h155.517c50.332 0 91.082-19.931 117.84-57.636C499.591 370.425 512 324.207 512 269.846v-18.648a36.671 36.671 0 0 0-19.023-32.138zM41.04 225.209c17.138-6.245 31.695-15.589 42.887-24.412a128.208 128.208 0 0 0 14.704 41.344c-25.533-1.704-44.748-9.525-57.591-16.932zm445.914 44.638c0 49.136-10.812 90.342-31.265 119.164-22.173 31.244-54.948 47.086-97.414 47.086H202.757c-24.045 0-46.62-9.399-63.563-26.467-16.946-17.07-26.182-39.723-26.006-63.781.199-25.927 11.87-50.51 32.015-67.442a12.528 12.528 0 0 0 4.465-9.678 12.516 12.516 0 0 0-4.605-9.612 103.705 103.705 0 0 1-13.091-12.79l-.005-.006c-16.028-18.66-24.854-42.515-24.854-67.17 0-1.628.035-3.11.113-4.625 2.423-55.299 47.73-98.618 103.148-98.618 56.928 0 103.243 46.315 103.243 103.244 0 26.306-9.92 51.373-27.934 70.583a12.521 12.521 0 0 0 7.868 21.026c72.976 7.425 133.734-2.74 175.735-29.401 5.133-3.261 9.843-1.328 11.629-.346 1.816.998 6.039 3.989 6.039 10.187v18.646z"/><path d="M302.82 374.732h-10.432c-6.915 0-12.523 5.607-12.523 12.524s5.607 12.524 12.523 12.524h10.432c6.916 0 12.524-5.607 12.524-12.524s-5.609-12.524-12.524-12.524zM425.577 324.05c-5.768-3.817-13.538-2.238-17.355 3.53-13.842 20.912-34.649 36.216-58.586 43.091-6.649 1.91-10.488 8.847-8.58 15.494 1.576 5.494 6.585 9.07 12.029 9.07 1.145 0 2.309-.158 3.464-.49 29.662-8.52 55.429-27.463 72.559-53.34 3.816-5.767 2.236-13.538-3.531-17.355zM179.087 126.365c-6.916 0-12.524 5.607-12.524 12.524v31.434c0 6.917 5.608 12.524 12.524 12.524s12.524-5.607 12.524-12.524v-31.434c0-6.917-5.608-12.524-12.524-12.524z"/></svg>
</div>
</div>
</div>
In general, you can combine multiple properties for transform: by simply adding them separated by a space, for example: transform: translateX(400px) rotate(20deg); But to be honest, I'm not sure what the result you want to achieve should look like.
svg path transform origin issue [duplicate]
This question already has answers here:
Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate
(2 answers)
Closed 1 year ago.
I am trying to move a path along x axis on :hover, and rotate it. What value of transform-origin should I use?
a {
display: inline-block;
}
svg, path {
transition: all ease .3s;
transform-origin: 50% 50%;
transform-box: fill-box;
}
.circle {
transform: rotate(-45deg) translateX(20px);
opacity: 0;
}
a:hover .circle{
transform: rotate(45deg) translateX(-20px);
opacity: 1;
}
<a href="" class="play">
<svg width="252" height="188" viewBox="0 0 252 188" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M118.765 118.031a2.945 2.945 0 01-2.942-2.942V72.912a2.944 2.944 0 014.827-2.261l25.306 21.089a2.943 2.943 0 010 4.52L120.65 117.35a2.945 2.945 0 01-1.885.682zm2.944-38.837v29.612L139.476 94l-17.767-14.806z" fill="#000"/>
<path class="circle" d="M125.913 144a49.728 49.728 0 01-24.437-6.386 2.942 2.942 0 112.887-5.128c17.169 9.664 38.901 6.676 52.847-7.276 17.21-17.209 17.21-45.21 0-62.419-17.209-17.212-45.212-17.21-62.42 0-17.21 17.21-17.21 45.21 0 62.419a2.944 2.944 0 01-4.162 4.163c-19.503-19.505-19.503-51.24 0-70.744 19.505-19.503 51.238-19.504 70.745 0 19.504 19.505 19.504 51.239 0 70.744-9.608 9.608-22.476 14.627-35.46 14.627z" fill="#FDB500"/></svg>
</a>
Looks like you just need to swap the order of the translateX and rotate parameters. Matrix multiplication is not commutative.
a {
display: inline-block;
}
svg, path {
transition: all ease .3s;
transform-origin: 50% 50%;
transform-box: fill-box;
}
.circle {
transform: translateX(20px) rotate(-45deg);
opacity: 0;
}
a:hover .circle{
transform: translateX(-20px) rotate(45deg);
opacity: 1;
}
<a href="" class="play">
<svg width="252" height="188" viewBox="0 0 252 188" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M118.765 118.031a2.945 2.945 0 01-2.942-2.942V72.912a2.944 2.944 0 014.827-2.261l25.306 21.089a2.943 2.943 0 010 4.52L120.65 117.35a2.945 2.945 0 01-1.885.682zm2.944-38.837v29.612L139.476 94l-17.767-14.806z" fill="#000"/>
<path class="circle" d="M125.913 144a49.728 49.728 0 01-24.437-6.386 2.942 2.942 0 112.887-5.128c17.169 9.664 38.901 6.676 52.847-7.276 17.21-17.209 17.21-45.21 0-62.419-17.209-17.212-45.212-17.21-62.42 0-17.21 17.21-17.21 45.21 0 62.419a2.944 2.944 0 01-4.162 4.163c-19.503-19.505-19.503-51.24 0-70.744 19.505-19.503 51.238-19.504 70.745 0 19.504 19.505 19.504 51.239 0 70.744-9.608 9.608-22.476 14.627-35.46 14.627z" fill="#FDB500"/></svg>
</a>
Floating ghost CSS animation
I have created an SVG ghost for my website's logo. I have made a CSS animation so when a user hovers the logo, the ghost starts floating.
Everything works okay except that when it is unhovered, the ghost just drops back to it's original position. Is it possible to have it also animated when it returns to translateY(0)? I have tried a solution myself, but it doesn't work.
Here is the example:
#keyframes float {
100% {
transform: translateY(-8px);
}
}
#keyframes bob {
0% {
transform: translateY(-8px);
}
100% {
transform: translateY(0);
}
}
#keyframes sink {
100% {
transform: translateY(0);
}
}
#logo svg {
margin: 20px;
overflow: visible;
}
#logo #ghost {
animation-name: sink;
animation-duration: 0.3s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#logo:hover #ghost {
animation-name: float, bob;
animation-duration: 0.3s, 0.7s;
animation-timing-function: ease-out, ease-in-out;
animation-delay: 0s, 0.3s;
animation-direction: normal, alternate;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
}
<div id="logo">
<svg width="100" height="100">
<g id="ghost">
<rect fill="red" width="100" height="100" />
</g>
</svg>
</div>
It isn't all that difficult with JQuery.
Here's a function that can be called regularly with a setInterval() timer:
var haunt=function(){
var dy;
ghost_ticks++;
ghost_clock++;
if (ghost_clock>30) ghost_clock=30;
dy = Math.sin(Math.abs(ghost_clock) * Math.PI/60); /* sine wave */
dy *= -40 + 6*Math.cos(ghost_ticks/5); /* ramp */
$("#ghost").css("transform","translate(0,"+dy+"px)");
if (ghost_clock==0) {
clearInterval(ghost_timer);
ghost_timer=ghost_ticks=0;
}
}
This calculates the ghost's position as the sum of two components — a sine-wave hovering motion, and a vertical offset that ramps up and down at the start and end of the animation and also controls the amplitude of the hovering.
This is done with two counter variables: ghost_ticks simply increments at every tick and is used to calculate the hovering position, while ghost_clock controls the ramp by counting up to 30 and then stopping. At the end of the animation, its value is made negative, so it counts back to zero, at which point the animation stops.
You can still use a CSS transition to change the ghost's colour.
var ghost_ticks=0, ghost_clock=0, ghost_timer=0;
var haunt=function(){
var dy;
ghost_ticks++;
ghost_clock++;
if (ghost_clock>30) ghost_clock=30;
dy = Math.sin(Math.abs(ghost_clock) * Math.PI/60);
dy *= -40 + 6*Math.cos(ghost_ticks/5);
$("#ghost").css("transform","translate(0,"+dy+"px)");
if (ghost_clock==0) {
clearInterval(ghost_timer);
ghost_timer=ghost_ticks=0;
}
}
var start_haunting=function(){
if (ghost_clock < 0) ghost_clock = -ghost_clock;
if (!ghost_clock) ghost_timer=setInterval(haunt,25);
};
var stop_haunting=function(){
if (ghost_clock > 0) ghost_clock = -ghost_clock;
};
$(document).ready(function(){
$("#logo").hover(start_haunting,stop_haunting);
});
#logo { background-color:#000; width: 200px; height: 200px; }
#logo #ghost { fill:#333; transition: fill 1s; }
#logo:hover #ghost { fill:#999; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">
<svg width="200" height="200" viewBox="0 0 200 200">
<g id="ghost" stroke="none">
<path d="M60 160V100A40 40 0 0 1 140 100V160l-10-10l-10 10l
-10-10l-10 10l-10-10l-10 10l-10-10ZM73 100a10 10 0
0 0 20 0 10 10 0 0 0 -20 0M107 100a10 10 0 0 0 20
0 10 10 0 0 0 -20 0z" />
</g>
</svg>
</div>