SVG Animation – טריק נחמד ויעיל לאנימציה ב-SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 739.46 264.65"><defs><style>.cls-1{opacity:0.2;}.cloud{fill:#fff;}.cls-3{opacity:0.4;}.cls-4{opacity:0.6;}.cls-5{opacity:0.3;}.cls-6{opacity:0.1;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1">
  <path class="cloud" d="M512.69,195.42a12.26,12.26,0,0,1-12.26,12.26H457.57a12.26,12.26,0,1,1,0-24.52,12.12,12.12,0,0,1,5.66,1.39,18.61,18.61,0,0,1,35.72-1.3,12.12,12.12,0,0,1,1.48-.09A12.26,12.26,0,0,1,512.69,195.42Z"/></g><g class="cls-3">
  <path class="cloud" d="M318,249a15.7,15.7,0,0,1-15.7,15.69H247.45a15.69,15.69,0,0,1,0-31.38A15.51,15.51,0,0,1,254.7,235a23.82,23.82,0,0,1,45.73-1.66,14.76,14.76,0,0,1,1.89-.11A15.69,15.69,0,0,1,318,249Z"/></g><g class="cls-3">
  <path class="cloud" d="M361,132.81a7.84,7.84,0,0,1-7.84,7.84h-27.4a7.84,7.84,0,1,1,3.62-14.79,11.9,11.9,0,0,1,22.83-.83c.31,0,.63,0,.95,0A7.83,7.83,0,0,1,361,132.81Z"/></g><g class="cls-4"><path class="cloud" d="M551.34,70.82a22.91,22.91,0,0,1-22.91,22.91H448.31A22.92,22.92,0,1,1,458.9,50.49a34.78,34.78,0,0,1,66.76-2.42,22.9,22.9,0,0,1,25.68,22.75Z"/></g><g class="cls-5"><path class="cloud" d="M184,95.61a33.48,33.48,0,0,1-33.47,33.47h-117A33.47,33.47,0,1,1,48.93,65.92a50.79,50.79,0,0,1,97.5-3.53,31.91,31.91,0,0,1,4-.25A33.47,33.47,0,0,1,184,95.61Z"/></g><g class="cls-4"><path class="cloud" d="M739.46,188.3a13.53,13.53,0,0,1-13.52,13.52H678.68a13.52,13.52,0,1,1,0-27,13.36,13.36,0,0,1,6.24,1.53,20.51,20.51,0,0,1,39.38-1.43,12.78,12.78,0,0,1,1.64-.1A13.52,13.52,0,0,1,739.46,188.3Z"/></g>
  <g class="cls-4"><path class="cloud" d="M177.4,174.19a11.15,11.15,0,0,1-11.16,11.16h-39a11.16,11.16,0,1,1,5.16-21.06,16.94,16.94,0,0,1,32.51-1.18,12.22,12.22,0,0,1,1.35-.08A11.16,11.16,0,0,1,177.4,174.19Z"/></g><g class="cls-1"><path class="cloud" d="M653.92,147.54a18.39,18.39,0,0,1-18.39,18.38H571.25a18.39,18.39,0,1,1,8.49-34.69,27.91,27.91,0,0,1,53.57-1.94,18.13,18.13,0,0,1,2.22-.14A18.39,18.39,0,0,1,653.92,147.54Z"/></g><g class="cls-6"><circle class="cloud" cx="647.84" cy="60.3" r="17.6"/></g><g class="cls-6"><circle class="cloud" cx="174.86" cy="35.71" r="17.6"/></g><g class="cls-4"><circle class="cloud" cx="537.4" cy="8.8" r="8.8"/></g><g class="cls-4"><circle class="cloud" cx="99.05" cy="176.35" r="4.4"/></g><g class="cls-4">
  <circle class="cloud" cx="513.05" cy="160.35" r="4.4"/>
  </g></g>
  </g></svg>

@keyframes CloudsMove {
  0%{transform: translate(0, 0);}
  25% {transform: translate(6px, 3px);}
  50% {transform: translate(0px, 0px);}
  75% {transform: translate(-6px ,-3px);}
  100% {transform: translate(0, 0);}
};

const allClouds = document.querySelectorAll('.cloud');

        allClouds.forEach(element => {
            element.style.animation = 'CloudsMove ' + (Math.random() * (30 - 20) + 20) +'s ' + (Math.random() * 3) + 's ease-in-out infinite';
        });