如何在SVG动画嘴？

Question

我想为嘴巴制作动画。没弄到怎么办我不知道要改变嘴巴的宽度。

.st0 {
  fill: #232323;
}

.st1 {
  fill: #FFFFFF;
}

@keyframes open {
  0% {
    ry: 61.7;
  }
  95% {
    ry: 61.7;
  }
  100% {
    ry: 0;
  }
}

.left-eye,
.right-eye {
  animation-name: open;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.mouth {}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 752.9 752.9" style="enable-background:new 0 0 752.9 752.9;" xml:space="preserve">
  <g id="circle" transform="translate(-17.5 -17.5) scale(0.3431372549019608)">
    <g>
      <circle vector-effect="non-scaling-stroke" class="st0" cx="1148.1" cy="1148.1" r="1097.1"/>
    </g>
  </g>
  <g id="icon" transform="translate(-16.40796717171717 -16.361616161616162) scale(0.3232323232323232)">
    <g>
      <ellipse class="st1 left-eye" cx="998.6" cy="1304.6" rx="41.1" ry="61.7"/>
      <ellipse class="st1 right-eye" cx="1410.1" cy="1304.6" rx="41.1" ry="61.7"/>
      <path class="st1 mouth" d="M1327.8,1428c-11.4,0-20.6,9.2-20.6,20.5c0,0,0,0,0,0c0,56.7-46.1,102.9-102.9,102.9s-102.9-46.1-102.9-102.9c0-11.4-9.2-20.6-20.6-20.6c-11.4,0-20.6,9.2-20.6,20.6c0,79.4,64.6,144,144,144c79.4,0,144-64.6,144-144c0.1-11.3-9-20.5-20.3-20.6C1327.9,1428,1327.9,1428,1327.8,1428L1327.8,1428z"/>
      <path class="st1" d="M1753.7,816.9l-287.9-288c-3.9-3.8-9.1-5.9-14.6-6H751.8C695,523,649,569,648.9,625.8v1152c0.1,56.8,46.1,102.8,102.9,102.9h905.1c56.8-0.1,102.8-46.1,102.9-102.9V831.5C1759.8,826,1757.6,820.8,1753.7,816.9zM1533.5,810.9c-34.1,0-61.7-27.6-61.7-61.7V593.1l217.8,217.8H1533.5z M1656.9,1839.5H751.8c-34.1,0-61.7-27.6-61.7-61.7v-1152c0-34.1,27.6-61.7,61.7-61.7h678.9v185.2c0.1,56.8,46.1,102.8,102.9,102.9h185.2v925.7C1718.6,1811.8,1691,1839.4,1656.9,1839.5L1656.9,1839.5z"/>
    </g>
  </g>
</svg>

Answer 1

使用比例并通过翻译调整位置：

.st0 {
  fill: #232323;
}

.st1 {
  fill: #FFFFFF;
}

@keyframes open {
  0% {
    ry: 61.7;
  }
  95% {
    ry: 61.7;
  }
  100% {
    ry: 0;
  }
}
@keyframes mouth {
  0% {
    transform:scale(1,1)
  }
  50% {
    transform:scale(1.5,1) translate(-38%);
  }
  100% {
    transform:scale(1,1)
  }
}

.left-eye,
.right-eye {
  animation-name: open;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.mouth {
animation-name: mouth;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin:center;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 752.9 752.9" style="enable-background:new 0 0 752.9 752.9;" xml:space="preserve">
  <g id="circle" transform="translate(-17.5 -17.5) scale(0.3431372549019608)">
    <g>
      <circle vector-effect="non-scaling-stroke" class="st0" cx="1148.1" cy="1148.1" r="1097.1"/>
    </g>
  </g>
  <g id="icon" transform="translate(-16.40796717171717 -16.361616161616162) scale(0.3232323232323232)">
    <g>
      <ellipse class="st1 left-eye" cx="998.6" cy="1304.6" rx="41.1" ry="61.7"/>
      <ellipse class="st1 right-eye" cx="1410.1" cy="1304.6" rx="41.1" ry="61.7"/>
      <path class="st1 mouth" d="M1327.8,1428c-11.4,0-20.6,9.2-20.6,20.5c0,0,0,0,0,0c0,56.7-46.1,102.9-102.9,102.9s-102.9-46.1-102.9-102.9c0-11.4-9.2-20.6-20.6-20.6c-11.4,0-20.6,9.2-20.6,20.6c0,79.4,64.6,144,144,144c79.4,0,144-64.6,144-144c0.1-11.3-9-20.5-20.3-20.6C1327.9,1428,1327.9,1428,1327.8,1428L1327.8,1428z"/>
      <path class="st1" d="M1753.7,816.9l-287.9-288c-3.9-3.8-9.1-5.9-14.6-6H751.8C695,523,649,569,648.9,625.8v1152c0.1,56.8,46.1,102.8,102.9,102.9h905.1c56.8-0.1,102.8-46.1,102.9-102.9V831.5C1759.8,826,1757.6,820.8,1753.7,816.9zM1533.5,810.9c-34.1,0-61.7-27.6-61.7-61.7V593.1l217.8,217.8H1533.5z M1656.9,1839.5H751.8c-34.1,0-61.7-27.6-61.7-61.7v-1152c0-34.1,27.6-61.7,61.7-61.7h678.9v185.2c0.1,56.8,46.1,102.8,102.9,102.9h185.2v925.7C1718.6,1811.8,1691,1839.4,1656.9,1839.5L1656.9,1839.5z"/>
    </g>
  </g>
</svg>