I know something like this can create a ball to move along the path.

</ma-svg> </div> <style type="text/css" > .ball { width: 15px; height: 5px; background-color: red; border-radius: 50%; offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80'); offset-distance: 0%; animation: red-ball 2s linear alternate infinite; } @keyframes red-ball { from { offset-distance: 0%; } to { offset-distance: 100%; } } </style> <path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path> </svg> <div class="ball"></div>

But what if I want to let the ball move along a path in my SVG (the path is complicated can not write it out as a single Line coordinates)?

And this is what the line looks like.!
0_1576303107054_20191214165753.png

@zhilin-chen said in Why this kind of <style> can not work?:

@thomaseinasto said in Why this kind of <style> can not work?:

!important

Yes!! It finally works!!! Thank you so much!!

Be careful using !important everywhere, it makes it hard to override elsewhere. Follow my instructions above and read this article -
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity