Question:
how to animate svg image I want the rabbit to blink its eyes.
#pa8{
width: 250px;
height:250px;
} <img id="pa8" src="https://vk.com/doc531961572_499477369?hash=a859da87b9143a35ba&dl=e70423d886a08a2415.svg">Answer:
I took the code from the previous answer, added the pupil of the eye to the rabbit. reworked the animation, taking into account the addition of the keyTimes attribute, which sets the uneven movement of the eyelid.
The main condition for applying this attribute is
The number of keytimes and values in path must match.
keyTimes="0;0.15;0.18;0.85;1" has 5 values, exactly as many values should be in the d path attribute animation formula – 5 more details here
.container {
width:90%;
height:90%;
}<div class="container">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1460 1880"
preserveAspectRatio="xMidYMid meet">
<!-- Тело кролика -->
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M7465 12781 c-206 -74 -565 -358 -1135 -897 -433 -408 -844 -865
-1110 -1231 -40 -57 -75 -101 -77 -99 -2 2 -23 68 -48 147 -100 326 -245 709
-348 914 -180 362 -327 487 -577 487 -183 1 -334 -74 -510 -251 -384 -387
-558 -881 -660 -1871 -63 -615 -123 -1818 -119 -2382 0 -92 -3 -172 -7 -179
-12 -19 -221 -114 -334 -152 -58 -19 -195 -56 -305 -82 -329 -77 -413 -108
-565 -210 -120 -80 -214 -167 -336 -308 -183 -212 -290 -389 -353 -582 -33
-102 -64 -255 -117 -565 -77 -458 -145 -682 -301 -994 -80 -159 -157 -284
-309 -502 -165 -236 -209 -310 -236 -398 -41 -133 -13 -219 127 -394 84 -106
147 -202 177 -270 11 -26 53 -144 93 -262 40 -119 87 -246 103 -282 88 -194
244 -348 421 -417 65 -26 69 -26 311 -23 190 2 267 -1 345 -14 96 -16 152 -16
301 2 l51 6 12 -48 c19 -73 52 -153 182 -435 227 -494 333 -686 500 -910 139
-184 471 -569 492 -569 11 0 13 -4 -132 205 -243 350 -403 607 -521 840 -154
301 -217 508 -276 906 l-5 35 133 12 c330 28 668 114 873 221 38 20 137 83
220 141 194 135 316 197 501 255 366 114 501 168 686 271 382 214 748 538 958
850 151 223 271 582 270 807 -1 78 -6 69 -65 -108 -55 -166 -169 -403 -255
-532 -189 -282 -468 -517 -828 -697 -273 -137 -518 -213 -948 -296 -685 -132
-778 -168 -1122 -429 -190 -144 -293 -195 -472 -234 -85 -19 -119 -21 -320
-17 -397 8 -505 5 -636 -19 -229 -40 -282 -27 -360 90 -53 80 -264 509 -292
593 -25 75 -20 90 27 82 93 -15 206 -99 406 -302 152 -155 202 -195 217 -171
13 21 9 72 -17 191 -32 148 -32 215 -1 281 33 69 74 114 265 288 198 181 471
462 494 509 14 28 14 33 2 36 -38 9 -169 -86 -509 -365 -347 -286 -465 -361
-580 -370 -235 -19 -511 197 -582 455 -15 54 -16 74 -7 127 12 68 9 63 588
1210 274 544 309 619 380 827 52 150 73 246 115 515 46 299 84 398 201 514
120 119 261 167 624 214 290 38 418 71 530 135 28 16 111 77 185 134 216 169
371 253 673 365 76 28 208 72 294 96 365 105 533 111 701 26 74 -37 146 -94
312 -245 253 -230 344 -293 434 -303 35 -4 47 -1 74 22 87 73 107 184 122 685
18 586 38 846 85 1129 134 789 419 1501 880 2196 120 181 327 464 390 533 106
118 99 19 -56 -833 -251 -1382 -415 -1953 -857 -2996 -86 -204 -125 -318 -153
-452 -19 -91 -22 -131 -20 -377 1 -363 16 -670 36 -743 59 -226 219 -308 770
-397 318 -52 671 -68 885 -41 224 28 477 89 820 198 96 31 197 62 223 70 76
23 47 26 -39 4 -196 -50 -614 -118 -939 -153 -186 -20 -646 -17 -765 5 -120
22 -272 74 -347 118 -96 57 -185 155 -238 262 -68 138 -88 225 -89 387 -1 199
37 323 165 546 214 373 535 1236 748 2015 128 469 230 993 361 1859 109 723
144 892 251 1213 59 177 72 273 44 331 -31 65 -89 80 -180 47z m-3270 -876
c46 -27 71 -58 112 -141 78 -155 138 -391 294 -1164 44 -217 96 -456 116 -530
49 -188 49 -175 8 -270 -52 -122 -121 -326 -156 -462 -56 -223 -81 -421 -99
-773 -27 -531 -72 -602 -429 -686 -457 -107 -516 -127 -829 -286 -112 -57
-206 -103 -209 -103 -3 0 -2 15 2 33 3 17 10 478 15 1022 8 955 12 1090 45
1420 42 408 115 782 205 1040 46 133 158 356 238 475 243 364 509 528 687 425z"/>
</g>
<!-- контур глаза -->
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)">
<path id="contur" fill="#C6CDEA" stroke="#d3d3d3" id="eye" d="M4379.5 6012.1C3644.6 6282.7 2221.8 5595.1 3760 5379c148-19 288 19 417 114 109 81 171 182 246 403-109.3 355.6-20.6-339.3-43.5 116.1z" stroke-width="30"/>
</g>
<!-- Зрачок глаза -->
<g id="eye">
<ellipse cx="392.3" cy="707.6" rx="25.9" ry="28.5" style="fill:#0c0813;stroke-width:3;stroke:#0c0813"/>
<ellipse cx="66.7" cy="800.8" rx="12.6" ry="5.6" transform="matrix(0.93017514,-0.36711607,0.39971713,0.91663854,0,0)" style="fill-opacity:0.9;fill:#dddceb"/>
</g>
<!-- Анимация века глаза -->
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)">
<path id="veko" fill="#d3d3d3" id="eye" d="M4379.5 6012.1C3644.6 6282.7 2221.8 5595.1 3760 5379c148-19 288 19 417 114 109 81 171 182 246 403-109.3 355.6-20.6-339.3-43.5 116.1z" stroke-width="30">
<animate
attributeName="d"
dur="3s"
values="M4379.5 6012.1C3644.6 6282.7 2221.8 5595.1 3760 5379c148-19 288 19 417 114 109 81 171 182 246 403-109.3 355.6-20.6-339.3-43.5 116.1z;
M 4379.5402,6012.1314 C 4540.5157,5168.8032 2367.525,5413.8361 3760,5379 c 148,-19 288,19 417,114 109,81 171,182 246,403 -109.3454,355.5504 -20.6455,-339.2546 -43.4598,116.1314 z;
M4379.5 6012.1C3644.6 6282.7 2221.8 5595.1 3760 5379c148-19 288 19 417 114 109 81 171 182 246 403-109.3 355.6-20.6-339.3-43.5 116.1z;
M 4379.5402,6012.1314 C 4540.5157,5168.8032 2367.525,5413.8361 3760,5379 c 148,-19 288,19 417,114 109,81 171,182 246,403 -109.3454,355.5504 -20.6455,-339.2546 -43.4598,116.1314 z;
M4379.5 6012.1C3644.6 6282.7 2221.8 5595.1 3760 5379c148-19 288 19 417 114 109 81 171 182 246 403-109.3 355.6-20.6-339.3-43.5 116.1z;"
keyTimes="0;0.15;0.18;0.85;1"
repeatCount="indefinite"
/>
</path>
</g>
</svg>
</div>