如何在SVG中制作嘴巴动画？

Question

I want to animate for the mouth. not getting how to do. and I don't know to change the width of the mouth.

 .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

Use scale and adjust position with translation:

 .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>