SVG 3 animating circles2019 Community Moderator ElectionHow can I create a “Please Wait, Loading…” animation using jQuery?What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG?Do I use <img>, <object>, or <embed> for SVG files?Android: Expand/collapse animationHow to calculate the SVG Path for an arc (of a circle)HTML5 Canvas vs. SVG vs. divHow to change color of SVG image using CSS (jQuery SVG image replacement)?How do I animate constraint changes?SVG circle animationimagemagick - convert does not work with use xlink:href in SVG - possible?
Can a space-faring robot still function over a billion years?
What's the best tool for cutting holes into duct work?
Has a sovereign Communist government ever run, and conceded loss, on a fair election?
Custom javascript not working
ESPP--any reason not to go all in?
Is there such a thing in math the inverse of a sequence?
Using the imperfect indicative vs. subjunctive with si
Is there a frame of reference in which I was born before I was conceived?
A bug in Excel? Conditional formatting for marking duplicates also highlights unique value
What is the purpose of a disclaimer like "this is not legal advice"?
Learning to quickly identify valid fingering for piano?
How to make sure I'm assertive enough in contact with subordinates?
Paper published similar to PhD thesis
Ultrafilters as a double dual
The past tense for the quoting particle って
Remove object from array based on array of some property of that object
I've given my players a lot of magic items. Is it reasonable for me to give them harder encounters?
Was it really inappropriate to write a pull request for the company I interviewed with?
Under what conditions would I NOT add my Proficiency Bonus to a Spell Attack Roll (or Saving Throw DC)?
Computing the volume of a simplex-like object with constraints
Professor forcing me to attend a conference
I can't die. Who am I?
PTIJ: Aliyot for the deceased
Giving a talk in my old university, how prominently should I tell students my salary?
SVG 3 animating circles
2019 Community Moderator ElectionHow can I create a “Please Wait, Loading…” animation using jQuery?What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG?Do I use <img>, <object>, or <embed> for SVG files?Android: Expand/collapse animationHow to calculate the SVG Path for an arc (of a circle)HTML5 Canvas vs. SVG vs. divHow to change color of SVG image using CSS (jQuery SVG image replacement)?How do I animate constraint changes?SVG circle animationimagemagick - convert does not work with use xlink:href in SVG - possible?
0
So im trying to animate 3 rotating circles (as seen here https://codepen.io/mckenziedave/pen/KEapXa) my problem is it seems the svg's are moving from side to side while animating.
Can someone tell me a fix for this / what im doing wrong.
.circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:3px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg);
<div style="position:absolute;top: 50%;left: 50%;">
<div class="circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
</div>
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
</div>
<div class="triangle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>
</div>css animation svg
edited yesterday
Amine KOUIS
94937
asked yesterday
DaveDave
617
add a comment |
0
So im trying to animate 3 rotating circles (as seen here https://codepen.io/mckenziedave/pen/KEapXa) my problem is it seems the svg's are moving from side to side while animating.
Can someone tell me a fix for this / what im doing wrong.
.circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:3px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg);
<div style="position:absolute;top: 50%;left: 50%;">
<div class="circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
</div>
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
</div>
<div class="triangle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>
</div>css animation svg
edited yesterday
Amine KOUIS
94937
asked yesterday
DaveDave
617
1
1. I would put everything in one svg element. 2. you have repeatedids
– enxaneta
yesterday
add a comment |
0
0
0
So im trying to animate 3 rotating circles (as seen here https://codepen.io/mckenziedave/pen/KEapXa) my problem is it seems the svg's are moving from side to side while animating.
Can someone tell me a fix for this / what im doing wrong.
.circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:3px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg);
<div style="position:absolute;top: 50%;left: 50%;">
<div class="circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
</div>
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
</div>
<div class="triangle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>
</div>css animation svg
edited yesterday
Amine KOUIS
94937
asked yesterday
DaveDave
617
So im trying to animate 3 rotating circles (as seen here https://codepen.io/mckenziedave/pen/KEapXa) my problem is it seems the svg's are moving from side to side while animating.
Can someone tell me a fix for this / what im doing wrong.
.circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:3px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg);
<div style="position:absolute;top: 50%;left: 50%;">
<div class="circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
</div>
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
</div>
<div class="triangle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>
</div> .circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:3px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg);
<div style="position:absolute;top: 50%;left: 50%;">
<div class="circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
</div>
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
</div>
<div class="triangle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>
</div> .circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:3px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg);
<div style="position:absolute;top: 50%;left: 50%;">
<div class="circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
</div>
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
</div>
<div class="triangle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>
</div>css animation svg
css animation svg
edited yesterday
Amine KOUIS
94937
asked yesterday
DaveDave
617
edited yesterday
Amine KOUIS
94937
asked yesterday
DaveDave
617
edited yesterday
Amine KOUIS
94937
edited yesterday
Amine KOUIS
94937
edited yesterday
Amine KOUIS
94937
94937
asked yesterday
DaveDave
617
asked yesterday
DaveDave
617
asked yesterday
DaveDave
617
617
1
1. I would put everything in one svg element. 2. you have repeatedids
– enxaneta
yesterday
add a comment |
1
1. I would put everything in one svg element. 2. you have repeatedids
– enxaneta
yesterday
1
1
1. I would put everything in one svg element. 2. you have repeated
ids– enxaneta
yesterday
1. I would put everything in one svg element. 2. you have repeated
ids– enxaneta
yesterday
add a comment |
2 Answers
2
active
oldest
votes
0
You need to add transform-origin tags to your css, so they will rotate around the center you define:
.circle
position:absolute;
z-index:3;
width: 50px;
transform-origin: 25px 25px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:3px;
transform-origin: 22.5px 22.5px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
transform-origin: 30px 30px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
Working fiddle: https://jsfiddle.net/osj9ay64/
answered yesterday
aptriangleaptriangle
43049
add a comment |
0
Wrapping the SVG's in divs screws up the automatic calculation of the transform-origin. So if you just move those classes from the wrapper divs into the SVG, the transform-origin is calculated correctly.
Note that you didn't have the arrow circle in the center of the SVG (should be at 40,40) - so fixed that. And the margin-left was a bit off too.
.circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:2px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg); <div style="position:absolute;top: 50%;left: 50%;">
<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
<svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>answered yesterday
Michael MullanyMichael Mullany
19.9k35982
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55022519%2fsvg-3-animating-circles%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You need to add transform-origin tags to your css, so they will rotate around the center you define:
.circle
position:absolute;
z-index:3;
width: 50px;
transform-origin: 25px 25px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:3px;
transform-origin: 22.5px 22.5px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
transform-origin: 30px 30px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
Working fiddle: https://jsfiddle.net/osj9ay64/
answered yesterday
aptriangleaptriangle
43049
add a comment |
0
You need to add transform-origin tags to your css, so they will rotate around the center you define:
.circle
position:absolute;
z-index:3;
width: 50px;
transform-origin: 25px 25px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:3px;
transform-origin: 22.5px 22.5px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
transform-origin: 30px 30px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
Working fiddle: https://jsfiddle.net/osj9ay64/
answered yesterday
aptriangleaptriangle
43049
add a comment |
0
0
0
You need to add transform-origin tags to your css, so they will rotate around the center you define:
.circle
position:absolute;
z-index:3;
width: 50px;
transform-origin: 25px 25px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:3px;
transform-origin: 22.5px 22.5px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
transform-origin: 30px 30px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
Working fiddle: https://jsfiddle.net/osj9ay64/
answered yesterday
aptriangleaptriangle
43049
You need to add transform-origin tags to your css, so they will rotate around the center you define:
.circle
position:absolute;
z-index:3;
width: 50px;
transform-origin: 25px 25px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:3px;
transform-origin: 22.5px 22.5px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
transform-origin: 30px 30px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
Working fiddle: https://jsfiddle.net/osj9ay64/
answered yesterday
aptriangleaptriangle
43049
answered yesterday
aptriangleaptriangle
43049
answered yesterday
aptriangleaptriangle
43049
answered yesterday
aptriangleaptriangle
43049
43049
add a comment |
add a comment |
0
Wrapping the SVG's in divs screws up the automatic calculation of the transform-origin. So if you just move those classes from the wrapper divs into the SVG, the transform-origin is calculated correctly.
Note that you didn't have the arrow circle in the center of the SVG (should be at 40,40) - so fixed that. And the margin-left was a bit off too.
.circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:2px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg); <div style="position:absolute;top: 50%;left: 50%;">
<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
<svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>answered yesterday
Michael MullanyMichael Mullany
19.9k35982
add a comment |
0
Wrapping the SVG's in divs screws up the automatic calculation of the transform-origin. So if you just move those classes from the wrapper divs into the SVG, the transform-origin is calculated correctly.
Note that you didn't have the arrow circle in the center of the SVG (should be at 40,40) - so fixed that. And the margin-left was a bit off too.
.circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:2px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg); <div style="position:absolute;top: 50%;left: 50%;">
<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
<svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>answered yesterday
Michael MullanyMichael Mullany
19.9k35982
add a comment |
0
0
0
Wrapping the SVG's in divs screws up the automatic calculation of the transform-origin. So if you just move those classes from the wrapper divs into the SVG, the transform-origin is calculated correctly.
Note that you didn't have the arrow circle in the center of the SVG (should be at 40,40) - so fixed that. And the margin-left was a bit off too.
.circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:2px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg); <div style="position:absolute;top: 50%;left: 50%;">
<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
<svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>answered yesterday
Michael MullanyMichael Mullany
19.9k35982
Wrapping the SVG's in divs screws up the automatic calculation of the transform-origin. So if you just move those classes from the wrapper divs into the SVG, the transform-origin is calculated correctly.
Note that you didn't have the arrow circle in the center of the SVG (should be at 40,40) - so fixed that. And the margin-left was a bit off too.
.circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:2px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg); <div style="position:absolute;top: 50%;left: 50%;">
<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
<svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>.circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:2px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg); <div style="position:absolute;top: 50%;left: 50%;">
<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
<svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>.circle
position:absolute;
z-index:3;
width: 50px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
.arrow
position:absolute;
z-index:2;
width: 45px;
margin-top:2px;
margin-left:2px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
.triangle
position:absolute;
z-index:2;
width: 60px;
margin-top:-5px;
margin-left:-4px;
-webkit-animation:spin-reverse 4s linear infinite;
-moz-animation:spin-reverse 4s linear infinite;
animation:spin-reverse 4s linear infinite;
@-moz-keyframes spin 100% -moz-transform: rotate(360deg);
@-webkit-keyframes spin 100% -webkit-transform: rotate(360deg);
@keyframes spin 100% -webkit-transform: rotate(3180deg); transform:rotate(360deg);
@-moz-keyframes spin-reverse 0% -moz-transform: rotate(-360deg);
@-webkit-keyframes spin-reverse 0% -webkit-transform: rotate(-360deg);
@keyframes spin-reverse 0% -webkit-transform: rotate(-360deg); transform:rotate(360deg); <div style="position:absolute;top: 50%;left: 50%;">
<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.clsfill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<defs cx="0"><style>.cls-1fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;.cls-2fill:#f7ad4f;</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
<svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-afill:#3385c2;</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
</div>answered yesterday
Michael MullanyMichael Mullany
19.9k35982
edited yesterday
answered yesterday
Michael MullanyMichael Mullany
19.9k35982
answered yesterday
Michael MullanyMichael Mullany
19.9k35982
answered yesterday
Michael MullanyMichael Mullany
19.9k35982
19.9k35982
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55022519%2fsvg-3-animating-circles%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
1. I would put everything in one svg element. 2. you have repeated
ids– enxaneta
yesterday