title: css: smooth animation with svg objects
body: <p>I made an animation of the rotation of the gears (svg objects), but the rotation is not smooth, jerky.</p>
  
  <p>Tell me, how can I fix this?
  I want to make a very smooth animation, if possible.</p>
  
  <p>For the property <code>animation</code> the animation step is not specified, so all animation properties are set automatically.</p>
  
  <p>animation: </p>
  
  <p>example: <a href="https://jsfiddle.net/qj7oct19/" rel="nofollow noreferrer">https://jsfiddle.net/qj7oct19/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wait-screen {
    display: block;
    z-index: 99998;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
  }
  
  .cssload-none {
    display: none;
  }
  
  .cssload-loader {
    z-index: 99999;
    position: absolute;
    left: calc(50% - 20vh);
    top: calc(50% - 20vh);
    width: calc(2 * 20vh);
    height: calc(2 * 20vh);
  }
  
  .cssload-waiting {
    z-index: 99999;
    position: absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    width: calc(2 * 50px);
    height: calc(2 * 50px);
  }
  
  .cssload-inner {
    position: absolute;
  }
  
  .cssload-inner.cssload-1 {
    z-index: 2;
    left: 0;
    bottom: 0;
    width: calc(100% * 768.73 / 1117.605);
    height: calc(100% * 768.73 / 1117.605);
    animation: cssload-rotate-1 4.0s linear infinite;
  }
  
  .cssload-inner.cssload-2 {
    z-index: 1;
    width: calc(100% * 592.98 / 1117.605);
    height: calc(100% * 592.98 / 1117.605);
    right: 0;
    top: 0;
    animation: cssload-rotate-2 3.0s linear infinite;
  }
  
  @keyframes cssload-rotate-1 {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  
  @keyframes cssload-rotate-2 {
    0% {
      transform: rotateZ(-0.125deg);
    }
    100% {
      transform: rotateZ(-360.125deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='wait-screen'&gt;
    &lt;div class='cssload-loader'&gt;
      &lt;div class='cssload-inner cssload-1'&gt;
        &lt;svg viewBox="0 0 768.73 768.73" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;path stroke="#0090d0" stroke-width="1px" vector-effect="non-scaling-stroke" fill="white" d="M544.67,34.79c5.39,23.15,8.16,49.78,2.15,75.79l28.32,18.92c21.73-15.5,47.39-23.13,70.85-27l20.26,20.26c-3.89,23.46-11.52,49.12-27,70.85l18.92,28.31c26-6,52.64-3.23,75.8,2.16l11,26.47c-12.57,20.18-29.44,41-52.07,55.11l6.65,33.41c26.32,4.4,49.86,17.15,69.19,31v28.65c-19.33,13.84-42.87,26.59-69.19,31l-6.65,33.41c22.63,14.14,39.5,34.93,52.07,55.11l-11,26.47c-23.16,5.39-49.79,8.16-75.79,2.15l-18.92,28.32c15.49,21.73,23.12,47.39,27,70.85L646,666.25c-23.46-3.89-49.12-11.52-70.85-27l-28.31,18.92c6,26,3.23,52.64-2.15,75.8l-26.48,11c-20.18-12.57-41-29.44-55.11-52.07l-33.4,6.65c-4.41,26.32-17.16,49.86-31,69.19H370c-13.84-19.33-26.59-42.87-31-69.19l-33.4-6.65c-14.15,22.63-34.93,39.5-55.12,52.07l-26.47-11c-5.39-23.16-8.16-49.79-2.15-75.79l-28.32-18.92c-21.73,15.49-47.39,23.12-70.84,27L102.48,646c3.89-23.46,11.52-49.12,27-70.85l-18.92-28.31c-26,6-52.63,3.23-75.79-2.15l-11-26.48c12.57-20.18,29.44-41,52.07-55.11l-6.64-33.4c-26.32-4.41-49.87-17.16-69.2-31V370c19.33-13.84,42.88-26.59,69.2-31l6.64-33.4c-22.63-14.15-39.5-34.93-52.07-55.12l11-26.47c23.15-5.39,49.78-8.16,75.79-2.15l18.92-28.32c-15.5-21.73-23.13-47.39-27-70.84l20.26-20.27c23.46,3.89,49.12,11.52,70.85,27l28.31-18.92c-6-26-3.23-52.63,2.16-75.79l26.47-11c20.18,12.57,41,29.44,55.11,52.07l33.41-6.64c4.4-26.32,17.15-49.87,31-69.2h28.65c13.84,19.33,26.59,42.88,31,69.2l33.41,6.64C477.23,53.26,498,36.39,518.2,23.82Z"/&gt;
      &lt;circle stroke="#0090d0" stroke-width="1px" vector-effect="non-scaling-stroke" fill="none" cx="384.365" cy="384.365" r="128.12"/&gt;
      &lt;/svg&gt;
      &lt;/div&gt;
      &lt;div class='cssload-inner cssload-2'&gt;
        &lt;svg viewBox="0 0 592.98 592.98" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;path stroke="#409280" stroke-width="1px" vector-effect="non-scaling-stroke" fill="white" d="m432.51 560.19c-22-9.48-47.2-25.2-59.2-46.38l-34.72 9.33c0.18 24.34-13.79 50.57-28.09 69.78h-28.07c-14.31-19.2-28.28-45.42-28.09-69.77l-34.76-9.31c-12 21.18-37.22 36.9-59.2 46.39l-24.31-14c-2.79-23.79-1.77-53.48 10.57-74.48l-25.41-25.44c-21 12.34-50.68 13.34-74.46 10.56l-14-24.31c9.46-22 25.19-47.22 46.42-59.21l-9.36-34.75c-24.34 0.18-50.56-13.79-69.76-28.08v-28.07c19.19-14.34 45.42-28.3 69.76-28.09l9.32-34.77c-21.17-12-36.9-37.22-46.38-59.2l14-24.31c23.79-2.79 53.47-1.77 74.47 10.57l25.44-25.4c-12.34-21-13.34-50.69-10.57-74.48l24.28-14c22 9.46 47.21 25.19 59.21 46.42l34.72-9.34c-0.19-24.35 13.78-50.56 28.09-69.76h28.07c14.32 19.19 28.29 45.42 28.07 69.76l34.77 9.32c12-21.17 37.22-36.9 59.21-46.38l24.3 14c2.79 23.78 1.78 53.47-10.56 74.46l25.41 25.45c21-12.34 50.68-13.34 74.46-10.57l14 24.31c-9.48 22-25.2 47.2-46.39 59.21l9.33 34.72c24.35-0.19 50.58 13.78 69.78 28.09v28.05c-19.19 14.3-45.41 28.27-69.76 28.08l-9.32 34.76c21.18 12 36.91 37.22 46.39 59.22l-14 24.29c-23.78 2.79-53.48 1.78-74.47-10.56l-25.42 25.4c12.34 21 13.34 50.68 10.56 74.46l-24.3 14z"/&gt;
      &lt;circle stroke="#409280" stroke-width="1px" vector-effect="non-scaling-stroke" fill="none" cx="296.49" cy="296.49" r="98.83"/&gt;
      &lt;/svg&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>