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