SVG CSS Animation issue

Issue

I am trying to recreate this gif animation, but on a SVG. The SVG is the same icon as the gif. I am unsure how it's done with CSS.

This is the gif

svg {
  width: 200px;
}

svg [data-name="right-line"] {
  transform: rotate(10deg);
}

<div>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 27.97 18.494">
    <g transform="translate(-.443292 0.304)">
      <g>
        <path d="M27.4,6.782c-7.609244-6.906331-19.218756-6.906331-26.828,0-.650213.586438-.76011,1.566067-.256,2.282l6.275,8.9c.444698.629922,1.252268.890007,1.981.638c1.738708-.602319,3.56592-.909558,5.406-.909h.007c1.84008-.000558,3.667292.306681,5.406.909.728522.251159,1.535402-.008297,1.981-.637l6.282-8.9c.50474-.715762.395717-1.69568-.254-2.283" transform="translate(.443-1.906)" fill="#9fbee8"/>
      <g>
        <line data-name="right-line" x1="0" y1="0" x2="7.313" y2="10.378" transform="translate(9.557 6.418001)" fill="none" stroke="#034ea2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <line x1="0" y1="0" x2="7.313" y2="10.378" transform="translate(4.983 6.418001)" fill="none" stroke="#034ea2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </g>
      </g>
    </g>
  </svg>
</div>

I have tried to rotating one of the lines, but it does not keep the position.

Just to test, if I can get it to rotate correct, so that I can create a keyframes anuimation for it

[data-name="right-line"] { transform: rotate(10deg); }

Solution

Then you specify transform/rotate in CSS you overwrite the transition/translate defined as an attribute. Either you define more transforms in the same attribute, or like in the following, wrap elements (line the line) in more grouping elements, so each element has its own transform.

svg {
  width: 200px;
}

svg line {
  transform: rotate(-25deg);
  animation: wipe 500ms infinite alternate linear;
}

@keyframes wipe {
  from {
    transform: rotate(-25deg);
  }

  to {
    transform: rotate(25deg);
  }
}

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 17.1">
    <path d="M 27.41 5.2 c -7.61 -6.91 -19.22 -6.91 -26.83 0 c -0.65 0.59 -0.76 1.57 -0.26 2.28 l 6.28 8.9 c 0.45 0.63 1.25 0.89 1.98 0.64 c 1.74 -0.6 3.57 -0.91 5.41 -0.91 h 0.01 c 1.84 0 3.67 0.31 5.41 0.91 c 0.73 0.25 1.53 -0.01 1.98 -0.64 l 6.28 -8.9 c 0.51 -0.72 0.4 -1.7 -0.25 -2.28 Z" fill="#9fbee8"/>
    <g stroke="#034ea2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <g transform="translate(17 16)">
      <line y2="-10.378" />
    </g>
    <g transform="translate(11 16)">
      <line y2="-10.378" />
    </g>
    </g>
  </svg>
</div>

Answered By - chrwahl