Анимация смайликов в CSS

Много времени потратил на поиск информации о том, чтобы в CSS заставить моргать смайлики с разной периодичностью во времени. Левый смайлик немного быстрее моргает, в отличии от правого. Под морганием я имею в виду: изменение формы элипсов по оси Y, эмуляция моргания. Смайлики


Ответы (1 шт):

Автор решения: Рекардо

Весь сценарий поведения этих иконок не известен и потому сделана только одно поведение, уточните так или нет

body {
  height: 100vh;
  background: #ccc;
  margin: 0;
}
<svg viewBox="0 0 340 300" width="300">
  <g class="f1">
   <ellipse cx="100" cy="120" rx="70" ry="100" />
   
    <ellipse cx="90" cy="80" rx="8" ry="20" fill="red" class="f1y1"></ellipse>
    <ellipse cx="130" cy="80" rx="8" ry="20" fill="red" class="f1y2">
      <animate  attributeName="ry"
       begin="f1banim.end"
       dur="0.2s"
       values="20;10;20"
       repeatCount="1"
       fill="freeze"
      />
    </ellipse>
    
    <ellipse cx="110" cy="150" rx="10" ry="10" fill="red" class="f1ь">
      <animate attributeName="rx"
       begin="0.2s"
       dur="0.2s"
       values="10;30;10"
       repeatCount="1"
       fill="freeze"
      />
    </ellipse>
  </g>
  
  <g transform="translate(150,20)" class="f2">
   <ellipse cx="100" cy="120" rx="70" ry="100" />
   
    <ellipse cx="110" cy="80" rx="8" ry="20" fill="red" class="f2y1">
      <animate  attributeName="ry"
       begin="0s"
       dur="0.2s"
       values="20;30;20"
       repeatCount="1"
       fill="freeze" />
    </ellipse>
    
    <ellipse cx="80" cy="80" rx="8" ry="20" fill="red" class="f2y2">
       <animate  attributeName="cx"
       begin="0.2s"
       dur="0.2s"
       values="130;80;80"
       repeatCount="1" />
    </ellipse>
    
    <ellipse cx="130" cy="150" rx="10" ry="10" fill="red" class="f2m">
       <animate  attributeName="cx"
       begin="0.2s"
       dur="0.2s"
       values="130;80;80"
       repeatCount="1"
       fill="freeze" />
    </ellipse>
  </g>
</svg>

→ Ссылка