CSS transform rotate animation not working as a spinning wheel - css
.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>
Related
How to close gap at the top of SVG triangle after drawing animation
I am working on a project with a lot of SVG-animation. I have no experience in this. I have Googled extensively without finding the solution to my problem. The problem is that when animating certain shapes, the animation leaves a gap in the shape. This is most prevalent on shapes with angles, like a triangle. I have seen this done successfully around the web, I just don't understand how. I have made a simple animation using Vivus Instant that you can see in this CodePen: Link to CodePen <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.89 367.25" class="start" style=""><title>triangeltest</title><path style="fill:#fff;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:15px" d="M121.44,23.89L10.38,359.75L232.51,359.75L121.44,23.89Z" class="fTJakOHn_0"></path><style data-made-with="vivus-instant">.fTJakOHn_0{stroke-dasharray:930 932;stroke-dashoffset:931;}.start .fTJakOHn_0{animation:fTJakOHn_draw 3000ms ease-in 0ms forwards;}#keyframes fTJakOHn_draw{100%{stroke-dashoffset:0;}}#keyframes fTJakOHn_fade{0%{stroke-opacity:1;}94.44444444444444%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg> Are there any libraries I can use that automatically avoids this problem? Do I have to export the shapes from Illustrator in a specific way?
What I would do is just disable the dash array once the animation completes. #keyframes fTJakOHn_draw { 99.9% { stroke-dashoffset:0; stroke-dasharray:930 932; } 100% { stroke-dasharray: none; } } If the animation needs to be able to restart after the fade animation, you might also need to put the dash pattern back afterwards. #keyframes fTJakOHn_fade { 0% { stroke-opacity:1; } 94.44444444444444% { stroke-opacity:1; stroke-dasharray: none; } 100% { stroke-opacity:0; stroke-dasharray:930 932; } } Example: .fTJakOHn_0 { stroke-dasharray:930 932; stroke-dashoffset:931; } .start .fTJakOHn_0 { animation:fTJakOHn_draw 3000ms ease-in 0ms forwards; } #keyframes fTJakOHn_draw { 99.9% { stroke-dashoffset:0; stroke-dasharray:930 932; } 100% { stroke-dasharray: none; } } #keyframes fTJakOHn_fade { 0% { stroke-opacity:1; } 94.44444444444444% { stroke-opacity:1; stroke-dasharray: none; } 100% { stroke-opacity:0; stroke-dasharray:930 932; } } <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.89 367.25" class="start" style=""><title>triangeltest</title> <path style="fill:#fff;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:15px" d="M121.44,23.89L10.38,359.75L232.51,359.75L121.44,23.89Z" class="fTJakOHn_0"></path> </svg>
Not sure if there's any easier way of doing this, the closest solution I found recently was using a clip path on the SVG itself. I've just stuck this on your codepen example as a tester: svg { clip-path: polygon(50% 6.4%, 0 100%, 100% 100%); } You may want to increase the stroke width if needed? It's not pretty, but it gets the result.
One possible solution would be adding stroke-linecap:round; stroke-linejoin:round; for the triangle: Layer_1.addEventListener("click",()=>{Layer_1.classList.toggle("start")}) svg{border:1px solid;width:200px;} <svg id="Layer_1" viewBox="0 0 242.89 367.25" class="start" ><title>triangeltest</title> <path style="fill:#fff;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:15px" d="M121.44,23.89L10.38,359.75L232.51,359.75L121.44,23.89Z" class="fTJakOHn_0"></path> <style data-made-with="vivus-instant"> .fTJakOHn_0{ stroke-dasharray:930; stroke-dashoffset:930; stroke-linecap:round; stroke-linejoin:round; } .start .fTJakOHn_0{ animation:fTJakOHn_draw 3000ms ease-in 0ms forwards; } #keyframes fTJakOHn_draw{ 100%{stroke-dashoffset:0;} }</style> </svg>
SVG Line Animation Reversed in Safari?
I've built pretty simple spinning animations for a site, and they look great in Chrome/Firefox, but for some reason, they're animating in reverse in Safari. I've played around with changing values of the offsets, but nothing seems to be working. Is there a workaround for this at all? .sq { width: 50vw; height: auto; padding: 2.2vw; } .path { stroke-dasharray: 250; stroke-dashoffset: 250; animation: line 3s ease forwards; } #keyframes line { from { stroke-dashoffset: -250; } to { stroke-dashoffset: 0; } } <div class="sq"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.32 81.32"> <defs> <style> .cls-1{fill:#202020;opacity:0.1;} .path{fill:none;stroke:#ef3f44;stroke-miterlimit:10;stroke-width:5px;} </style> </defs> <g id="94" data-name="94"> <g id="Objects"> <circle cx="40.66" cy="40.66" r="27.17" class="cls-1"/> <path d="M40.66 79.15a38.49 38.49 0 1 1 38.49-38.49 38.53 38.53 0 0 1-38.49 38.49zm0-76.07a37.58 37.58 0 1 0 37.58 37.58A37.63 37.63 0 0 0 40.66 3.08z" class="cls-1"/> <path d="M26.83 5.1a38.16 38.16 0 1 0 13.83-2.6" class="path"/> </g> </g> </svg> </div> Also feel free to check this out on Codepen as well: https://codepen.io/noahbrennan/pen/RLNWXj
In order not to use negative values of stroke-dashoffset, you can use double the positive value of stroke-dashoffset: 500; Instead of negative values #keyframes line { from { stroke-dashoffset: -250; } to { stroke-dashoffset: 0; } } Use double positive values: #keyframes line { from { stroke-dashoffset: 250; } to { stroke-dashoffset: 500; } } .sq { width: 50vw; height: auto; padding: 2.2vw; } .path { stroke-dasharray: 250; stroke-dashoffset: 250; animation: line 3s ease forwards; } #keyframes line { from { stroke-dashoffset: 250; } to { stroke-dashoffset: 500; } } <div class="sq"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.32 81.32"> <defs> <style> .cls-1{fill:#202020;opacity:0.1;} .path{fill:none;stroke:#ef3f44;stroke-miterlimit:10;stroke-width:5px;} </style> </defs> <g id="94" data-name="94"> <g id="Objects"> <circle cx="40.66" cy="40.66" r="27.17" class="cls-1"/> <path d="M40.66 79.15a38.49 38.49 0 1 1 38.49-38.49 38.53 38.53 0 0 1-38.49 38.49zm0-76.07a37.58 37.58 0 1 0 37.58 37.58A37.63 37.63 0 0 0 40.66 3.08z" class="cls-1"/> <path d="M26.83 5.1a38.16 38.16 0 1 0 13.83-2.6" class="path"/> </g> </g> </svg> </div>
Safari doesn't support negative dashoffsets. You'll need to work around that by reversing your path and having the dashoffset animate the other way.
Had the same issue for an svg circle. I wanted the animation to progress counter clockwise. Ended up solving it by horizontally flipping the circle and using a positive dash offset. I used a transform to flip the circle. scale(-1 1) See codepen for an example. https://codepen.io/rikki404/pen/YzydPJq
Animate SVG fill from left to right
I have this SVG that I want to smoothly fill from left to right. How can I do that using CSS? I don't want the line to be moving, i want it filling smoothly from left to right while staying in the same place, that's why i'm using svg. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="324" height="25" viewBox="0 0 324 25"> <g id="btn_underline"> <path id="V" d="M88.029,0.613 C58.722,-0.156 29.992,3.400 1.839,11.183 C-1.140,12.047 0.205,16.660 3.184,15.795 C28.262,8.781 54.014,5.321 80.438,5.321 C83.801,5.321 86.203,5.321 87.836,5.417 C96.196,5.610 105.324,6.282 115.413,7.339 C125.503,8.396 133.958,9.453 140.588,10.510 C147.218,11.471 156.346,12.912 167.781,14.834 C182.098,17.236 194.397,19.158 204.582,20.599 C223.511,23.194 240.519,24.443 255.412,24.443 C259.256,24.443 262.138,24.443 264.060,24.347 C274.726,23.962 284.623,23.001 293.655,21.368 C303.936,19.542 313.449,17.044 322.385,13.873 C323.634,13.489 324.307,12.047 323.826,10.798 C323.250,9.357 322.193,8.877 320.751,9.357 C311.815,12.624 302.495,15.026 292.790,16.660 C283.758,18.197 274.149,19.158 263.868,19.542 C246.668,20.023 227.066,18.774 205.159,15.795 C195.742,14.546 183.539,12.624 168.549,10.126 C156.635,8.108 147.506,6.667 141.069,5.706 C134.631,4.745 126.271,3.688 115.990,2.631 C105.709,1.478 96.388,0.805 88.029,0.613 z" fill="#00363B" /> </g> </svg> http://codepen.io/anon/pen/GrQPvK
You can indeed do this in CSS with the stroke property. I'm sorry by advance, I can't use your SVG because it's a shape and in order to make your effect you only need a path without fill. So I take this SVG for the example (from this article : https://jakearchibald.com/2013/animated-line-drawing-svg/): <svg xmlns="http://www.w3.org/2000/svg" height="98" width="581" viewBox="0 0 581 98"> <path class="path" d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" stroke="#000" stroke-width="4.3" fill="none"> </path> </svg> Notice the stroke and stroke-width properties. It's the beginning of the trick ;). Then you need to add some CSS : .path { //we divide the line in multiple dashes (some full and other empty) //these dashes have 1000px in length //so there are one dash full of 1000px of length and then one dash empty of 1000px of length and so on and so forth stroke-dasharray: 1000; //we change the position of the dashes stroke-dashoffset: 1000; //now we animate the dashoffset //we reduce the offset of each dash so we have the impression that the dashes are moving animation: dash 5s linear forwards; } #keyframes dash { to { stroke-dashoffset: 0; } } And that's it ! For more information, you can read this article too : https://css-tricks.com/svg-line-animation-works/
You could work from this. svg { left: -400px; position:absolute; } #keyframes example { from {left: -400px;} to {left: 200px;} } #-webkit-keyframes example { from {left: -400px;} to {left: 200px;} } svg { animation-name: example; animation-duration: 4s; animation-delay: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } ccodepen: http://codepen.io/anon/pen/egVbMV
Try this .fadeIn { animation-name: fade-in-left; animation-duration: 1s; } #keyframes fade-in-left { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; transform: none; } } Live demo - http://codepen.io/anon/pen/MJQLgG
css keyframes animation with transform not working on 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.
Change direction of SVG animation
I saw this SVG animation and I'm wondering how to alter the direction that the line is erased in; currently the line retracts from the last point it is drawn, however I want the reverse; for the line to erase itself from the point where it first started to draw (so that it looks more like a loading animation). I see that the animation property on .path has a value of infinite, but I'm not sure how the direction is specified. The HTML is <div class="bg"> <svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236"> <path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1z"/> <path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M335 38.9c-43.7 0-79.1 35.4-79.1 79.1s35.4 79.1 79.1 79.1 79.1-35.4 79.1-79.1-35.4-79.1-79.1-79.1zM335 182.9c-35.8 0-64.9-29.1-64.9-64.9s29.1-64.9 64.9-64.9 64.9 29.1 64.9 64.9-29.1 64.9-64.9 64.9z"/> </svg> </div> And the CSS is body { background-color: #fff; } .bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .path { animation: draw 3.5s infinite; } #keyframes draw { 50% { stroke-dashoffset: 0; } }
I like your idea of making this an loading animation: CODEPEN Now what i did: changed the animation start stop point #keyframes draw { 100% { stroke-dashoffset: -500; } } Why -500? Because this is the value of the dash-array. This is defined in the <svg>: dasharray="500" Changed this value in the inner most path. It was only 300 I added a linear animation animation: draw 5s infinite linear; The default is ease. I found the animation has better consistency with a linear animation. NOTE dashoffset=500 <- makes the animation start without the dash/stroke
I used the negative value for stroke-dashoffset that Persijn recommended. This worked great in Chrome and FF, but it didn't work properly in Safari. I've found that if you open the SVG in Illustrator, you can reverse the direction of the path, by opening the Attributes panel (you might have to click the "show more" in the top right) and literally clicking the "reverse path" button.
stroke-dasharray can be a list of white space separated dashes and gaps, so you could do something like this: var svgPath = document.getElementById('svgPath'); var pathLength = svgPath.getTotalLength(); var offset = 0; function offsetPath() { requestAnimationFrame(offsetPath); offset += 0.1; var dasharray = 0 + ' ' + offset + ' ' + (pathLength - offset); svgPath.setAttribute('stroke-dasharray', dasharray); } requestAnimationFrame(offsetPath); <svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236"> <path id="svgPath" class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="100 100 100" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1z" /> </svg>
Changing SVG Line Animation Direction Add KeyFrames and Classes for Both Directions: .dash { stroke-dasharray : 10 5; animation : dash 4s linear infinite; } .dash_reverse { stroke-dasharray : 10 5; animation : dash_reverse 4s linear infinite; } #keyframes dash { to { stroke-dashoffset: 100; } } #keyframes dash_reverse { to { stroke-dashoffset: -100; } } Use JavaScript to Toggle Animation: function animate_line_forward(id) { $("#" + id).removeClass("dash_reverse"); $("#" + id).addClass("dash"); } function animate_line_reverse(id) { $("#" + id).removeClass("dash"); $("#" + id).addClass("dash_reverse"); } Call functions as needed (pass the SVG line id into the above functions: Calling animate_line_forward: Calling animate_line_reverse: