svg breaking animation on rotation - css

Question

the codepen link
Hi everyone
I'm having issue with my cabins rotation.
they tend to go outside the wheel
/*svg colors */
.cls-1 {
fill: #e8f3e2;
}
.cls-2 {
fill: #faf4a8;
}
.cls-3 {
fill: #cac277;
}
.cls-4 {
fill: #f3ca76;
}
.cls-5 {
fill: #fdf387;
}
.cls-6 {
fill: #c2e4d8;
}
.cls-7 {
fill: #aedccd;
}
.cls-8 {
opacity: 0.5;
}
.cls-10,
.cls-16,
.cls-17,
.cls-22,
.cls-32,
.cls-38,
.cls-39,
.cls-48,
.cls-50,
.cls-56,
.cls-9 {
fill: none;
}
.cls-16,
.cls-17,
.cls-9 {
stroke: #dab6c4;
}
.cls-10,
.cls-18,
.cls-19,
.cls-32,
.cls-38,
.cls-39,
.cls-48,
.cls-50,
.cls-56,
.cls-9 {
stroke-miterlimit: 10;
}
.cls-10 {
stroke: #e6d0d8;
}
.cls-11 {
fill: #e7d0d8;
}
.cls-12 {
fill: #dab6c4;
}
.cls-13,
.cls-18 {
fill: #b5d780;
}
.cls-14 {
fill: #9cb17e;
}
.cls-15 {
fill: #f16a83;
}
.cls-16,
.cls-17 {
stroke-linejoin: bevel;
stroke-width: 2px;
}
.cls-17 {
stroke-dasharray: 14.92 4.97;
}
.cls-18 {
stroke: #b5d780;
}
.cls-18,
.cls-19 {
stroke-width: 0.25px;
}
.cls-19,
.cls-21 {
fill: #aec58b;
}
.cls-19 {
stroke: #aec58b;
}
.cls-20 {
fill: #7d8a71;
}
.cls-23 {
fill: #f69eac;
}
.cls-24 {
fill: #c38f98;
}
.cls-25 {
fill: #816872;
}
.cls-26 {
fill: #6d6066;
}
.cls-27 {
fill: #806871;
}
.cls-28 {
fill: #dbbf53;
}
.cls-29 {
fill: #bfcf30;
}
.cls-30 {
fill: #b29ea7;
}
.cls-31 {
fill: #8d6876;
}
.cls-32,
.cls-48 {
stroke: #8d6876;
}
.cls-32 {
opacity: 0.6;
}
.cls-33 {
fill: #d2a849;
}
.cls-34 {
fill: #e0b24d;
}
.cls-35 {
fill: #bf6872;
}
.cls-36 {
fill: #f0bf53;
}
.cls-37 {
fill: #c6c49e;
}
.cls-38 {
stroke: #f69eac;
}
.cls-39 {
stroke: #c38f98;
}
.cls-40 {
fill: #c5c072;
}
.cls-41 {
fill: #fdf164;
}
.cls-42 {
fill: #dbedd1;
}
.cls-43 {
fill: #b2beaf;
}
.cls-44 {
fill: #feeb19;
}
.cls-45 {
fill: #9998c8;
}
.cls-46 {
fill: #fef5b1;
}
.cls-47 {
fill: #fac1c4;
}
.cls-49 {
fill: #bfa264;
}
.cls-50 {
stroke: #806871;
}
.cls-51 {
fill: #ce9d2b;
}
.cls-52 {
fill: #c06975;
}
.cls-53 {
fill: #e0efd3;
}
.cls-54 {
fill: #b9e1d2;
}
.cls-55 {
fill: #fff;
}
.cls-56 {
stroke: #231f20;
}
.cls-57 {
fill: #ffefb8;
}
.cls-58 {
fill: #dfedc9;
}
.cls-59 {
fill: #f6d695;
}
.cls-60 {
fill: #fcd6d9;
}
.cls-61 {
fill: #a48691;
}
.cls-62 {
fill: #eddee3;
}
.cls-63 {
fill: #fcf8ca;
}
.cls-64 {
fill: #b8b2d8;
}
.cls-65 {
fill: #eff7ea;
}
.cls-66 {
fill: #fef7b7;
}
.cls-67 {
fill: #fee9a0;
}
.cls-99 {
fill: #ddd162;
}
body {max-width: 1440px;}
#needles {
-webkit-animation: rotate 5s linear infinite;
animation: rotate 5s linear infinite;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transform-box: fill-box;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg)
}
}
#keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg)
}
}
#arms {
-webkit-animation: rotate-out 5s linear infinite;
animation: rotate-out 5s linear infinite;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transform-box: fill-box;
}
#-webkit-keyframes rotate-out {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
}
#keyframes rotate-out {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
}
#cabins {
-webkit-animation: cabin-transit 5s linear infinite;
animation: cabin-transit 5s linear infinite;
-webkit-transform-origin: 648.22px 301.55px;
-ms-transform-origin: 648.22px 301.55px;
transform-origin: 648.22px 301.55px;
}
#-webkit-keyframes cabin-transit {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
}
#keyframes cabin-transit {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
}
.cabin {
-webkit-animation: cabin-transform 5s linear infinite;
animation: cabin-transform 5s linear infinite;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transform-box: fill-box;
}
#-webkit-keyframes cabin-transform {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg)
}
}
#keyframes cabin-transform {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg)
}
}
#balloon,
#bunch_of_balloons1,
#bunch_of_balloons {
-webkit-animation: balloon-anim 5s linear infinite;
animation: balloon-anim 5s linear infinite;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
transform-box: fill-box;
}
#-webkit-keyframes balloon-anim {
0% {
-webkit-transform: rotate(0deg) translate(0);
transform: rotate(0deg) translate(0)
}
25% {
-webkit-transform: rotate(2deg) translateY(5px);
transform: rotate(2deg) translateY(5px)
}
50% {
-webkit-transform: rotate(-2deg) translateY(-5px);
transform: rotate(-2deg) translateY(-5px)
}
75% {
-webkit-transform: rotate(-2deg) translateY(5px);
transform: rotate(-2deg) translateY(5px)
}
100% {
-webkit-transform: rotate(0deg) translate(0);
transform: rotate(0deg) translate(0)
}
}
#keyframes balloon-anim {
0% {
-webkit-transform: rotate(0deg) translate(0);
transform: rotate(0deg) translate(0)
}
25% {
-webkit-transform: rotate(2deg) translateY(5px);
transform: rotate(2deg) translateY(5px)
}
50% {
-webkit-transform: rotate(-2deg) translateY(-5px);
transform: rotate(-2deg) translateY(-5px)
}
75% {
-webkit-transform: rotate(-2deg) translateY(5px);
transform: rotate(-2deg) translateY(5px)
}
100% {
-webkit-transform: rotate(0deg) translate(0);
transform: rotate(0deg) translate(0)
}
}
#clouds-front {
-webkit-animation: cloud-transit infinite ease-in-out 5s;
animation: cloud-transit infinite ease-in-out 5s;
}
#clouds-back {
-webkit-animation: cloud-transit-2 infinite ease-out 5s;
animation: cloud-transit-2 infinite ease-out 5s;
}
#-webkit-keyframes cloud-transit {
0% {
opacity: 0
}
50% {
opacity: 1;
}
100% {
-webkit-transform: translateX(-5%);
transform: translateX(-5%);
opacity: 0;
}
}
#keyframes cloud-transit {
0% {
opacity: 0
}
50% {
opacity: 1;
}
100% {
-webkit-transform: translateX(-5%);
transform: translateX(-5%);
opacity: 0;
}
}
#-webkit-keyframes cloud-transit-2 {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateX(5%);
transform: translateX(5%);
}
}
#keyframes cloud-transit-2 {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateX(5%);
transform: translateX(5%);
}
}

Answer 1

In the following example I'm simplifying your code letting only the main wheel and the cabins.
In fact I'm using only a cabin as a symbol. All the others cabins are use elements, a copy of the symbol. This is simplifying a lot the code.
Although in the beginning I intended to use css, I think using animateMotion is the easiest solution. In SVG <animateMotion> provides a way to define how an element moves along a motion path - in this case the path is a circle - the wheel.
Please observe that the motion path is different for each cabin. Although all the motion paths are drawing the same circle, each path starts in a different point - the point where the cabin start it's animation.
Also every <use> element has x="-17.5" y="0" so that the point by which the cabin hangs on the wheel is now in the point {x:0,y:0}.
In order to draw the wheel and the cabins I'm using javascript. If you don't want Javascript you can copy the code from the inspector.
const SVG_NS = "http://www.w3.org/2000/svg";
const SVG_XLINK = "http://www.w3.org/1999/xlink";
let cx = 648.22;
let cy = 301.55;
let r = 158.88;
let t = 0;
let a = Math.PI / 5;
for (let i = 0; i < 2 * Math.PI; i += a) {
t++;
let x = cx + r * Math.cos(i);
let _x = cx + r * Math.cos(i + Math.PI);
let y = cy + r * Math.sin(i);
let _y = cy + r * Math.sin(i + Math.PI);
let use = document.createElementNS(SVG_NS, "use");
use.setAttributeNS(SVG_XLINK, "xlink:href", "#cabin");
use.setAttribute("x", -17.5);
use.setAttribute("y", 0);
use.setAttribute("width", 35);
use.setAttribute("height", 53);
let aM = document.createElementNS(SVG_NS, "animateMotion");
aM.setAttribute(
"path",
`M${x},${y}
A${r},${r} 0 0 1 ${_x},${_y}
A${r},${r} 0 0 1 ${x},${y}`
);
aM.setAttribute("repeatCount", "indefinite");
aM.setAttribute("dur", "10s");
use.appendChild(aM);
cabins.appendChild(use);
}
<svg id="sky_day" data-name="sky day" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1295.87 804.79">
<symbol id="cabin" viewBox="779.8 357 35 53">
<path class="cls-40" d="M801.41,357.53a24.71,24.71,0,0,0-4.14-.35V361a26.34,26.34,0,0,1,2.79.15c7.3,0.88,12.21,10.6,12.14,17.29h0c0,6.77-5.32,10.87-12.26,10.74q-1.33-.06-2.67-0.06v20.1h3.83c7.51-.25,13.64-6.44,13.56-13.56V377.94C814.64,370.9,809.6,359.08,801.41,357.53Z" />
<path class="cls-41" d="M793.13,357.53a24.71,24.71,0,0,1,4.14-.35V361a26.34,26.34,0,0,0-2.79.15c-7.3.88-12.21,10.6-12.14,17.29h0c0,6.77,5.32,10.87,12.26,10.74q1.33-.06,2.67-0.06v20.1h-3.83c-7.51-.25-13.64-6.44-13.56-13.56V377.94C779.89,370.9,784.93,359.08,793.13,357.53Z" />
</symbol>
<g id="wheels">
<circle fill="none" stroke="black" cx="648.22" cy="301.55" r="158.88" />
</g>
<g id="cabins">
</g>
</svg>
Here is the code without javascript:
<svg id="sky_day" data-name="sky day" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1295.87 804.79">
<symbol id="cabin" viewBox="779.8 357 35 53">
<path class="cls-40" d="M801.41,357.53a24.71,24.71,0,0,0-4.14-.35V361a26.34,26.34,0,0,1,2.79.15c7.3,0.88,12.21,10.6,12.14,17.29h0c0,6.77-5.32,10.87-12.26,10.74q-1.33-.06-2.67-0.06v20.1h3.83c7.51-.25,13.64-6.44,13.56-13.56V377.94C814.64,370.9,809.6,359.08,801.41,357.53Z"></path>
<path class="cls-41" d="M793.13,357.53a24.71,24.71,0,0,1,4.14-.35V361a26.34,26.34,0,0,0-2.79.15c-7.3.88-12.21,10.6-12.14,17.29h0c0,6.77,5.32,10.87,12.26,10.74q1.33-.06,2.67-0.06v20.1h-3.83c-7.51-.25-13.64-6.44-13.56-13.56V377.94C779.89,370.9,784.93,359.08,793.13,357.53Z"></path>
</symbol>
<g>
<g id="wheels">
<circle fill="none" stroke="black" cx="648.22" cy="301.55" r="158.88"></circle>
</g>
<g id="cabins">
<use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
<animateMotion path="M807.1,301.55A158.88,158.88 0 0 1 489.34000000000003,301.55A158.88,158.88 0 0 1 807.1,301.55" repeatCount="indefinite" dur="10s"></animateMotion>
</use>
<use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
<animateMotion path="M776.7566200662917,394.93732088422814A158.88,158.88 0 0 1 519.6833799337084,208.16267911577188A158.88,158.88 0 0 1 776.7566200662917,394.93732088422814" repeatCount="indefinite" dur="10s"></animateMotion>
</use>
<use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
<animateMotion path="M697.3166200662916,452.653859308974A158.88,158.88 0 0 1 599.1233799337084,150.44614069102602A158.88,158.88 0 0 1 697.3166200662916,452.653859308974" repeatCount="indefinite" dur="10s"></animateMotion>
</use>
<use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
<animateMotion path="M599.1233799337084,452.653859308974A158.88,158.88 0 0 1 697.3166200662916,150.44614069102602A158.88,158.88 0 0 1 599.1233799337084,452.653859308974" repeatCount="indefinite" dur="10s"></animateMotion>
</use>
<use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
<animateMotion path="M519.6833799337085,394.93732088422814A158.88,158.88 0 0 1 776.7566200662916,208.16267911577185A158.88,158.88 0 0 1 519.6833799337085,394.93732088422814" repeatCount="indefinite" dur="10s"></animateMotion>
</use>
<use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
<animateMotion path="M489.34000000000003,301.55A158.88,158.88 0 0 1 807.1,301.54999999999995A158.88,158.88 0 0 1 489.34000000000003,301.55" repeatCount="indefinite" dur="10s"></animateMotion>
</use>
<use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
<animateMotion path="M519.6833799337084,208.16267911577188A158.88,158.88 0 0 1 776.7566200662917,394.9373208842281A158.88,158.88 0 0 1 519.6833799337084,208.16267911577188" repeatCount="indefinite" dur="10s"></animateMotion>
</use>
<use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
<animateMotion path="M599.1233799337084,150.44614069102602A158.88,158.88 0 0 1 697.3166200662918,452.653859308974A158.88,158.88 0 0 1 599.1233799337084,150.44614069102602" repeatCount="indefinite" dur="10s"></animateMotion>
</use>
<use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
<animateMotion path="M697.3166200662916,150.44614069102602A158.88,158.88 0 0 1 599.1233799337084,452.653859308974A158.88,158.88 0 0 1 697.3166200662916,150.44614069102602" repeatCount="indefinite" dur="10s"></animateMotion>
</use>
<use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
<animateMotion path="M776.7566200662916,208.16267911577185A158.88,158.88 0 0 1 519.6833799337085,394.93732088422814A158.88,158.88 0 0 1 776.7566200662916,208.16267911577185" repeatCount="indefinite" dur="10s"></animateMotion>
</use>
</g>
</g>
</svg>