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

Question

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

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

Answer 2

Цитата из вопроса:

Под морганием я имею в виду: изменение формы эллипсов по оси Y, эмуляция моргания.

Для реализации изменения формы эллипсов по оси Y применена анимация ry

<ellipse cx="70" cy="35" ry="10" rx="12" fill="black" >
    <animate attributeName="ry" dur="1s" begin="gr1.click" keyTimes=" 0;0.25;0.5;0.75;1" values="10;0;5;0;10" repeatCount="1" /> 
</ellipse>

Неравномерность моргания обеспечивают параметры keyTimes и values
Обратите внимание:
количество значений в обоих атрибутах должно быть одинаковым, в данном примере их по пять значений.

Можно делать иконки любой формы.

В примере ниже квадратная иконка, у которой моргает правый глаз и круглая иконка, как на скриншоте в вопросе.

Анимация начинается при клике по иконке

<svg  id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    
     width="200" height="100" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet"  >  
                <!-- Прямоугольнрая иконка -->
<g id="gr1"> 
<rect id="rect" x="10" y="0" rx="15" width="85" height="100" fill="gold" />
 
<ellipse cx="35" cy="35" ry="10" rx="12" fill="black" >
 </ellipse>  
                  <!-- Правый глаз  -->
<ellipse cx="70" cy="35" ry="10" rx="12" fill="black" >
    <animate attributeName="ry" dur="1s" begin="gr1.click" keyTimes=" 0;0.25;0.5;0.75;1" values="10;0;5;0;10" repeatCount="1" /> 
</ellipse>

<circle cx="52.5" cy="50" r="30" fill="none" stroke="black" stroke-dashoffset="-6" stroke-dasharray="80 108.49" />
</g>

               <!-- Круглая иконка -->

<g id="gr2"> 
<circle cx="150" cy="50"  r="46"  stroke="#FE411E" fill="transparent"  stroke-width="6" />
                         <!-- Левый глаз  -->
    <ellipse cx="148" cy="34" ry="16" rx="8" fill="#FE411E" >  
            <animate attributeName="ry" dur="1s" begin="gr2.click" keyTimes=" 0;0.25;0.5;0.75;1" values="15;0;5;0;15" repeatCount="1" />   
  </ellipse>
                         <!-- Правый глаз  -->
     <ellipse cx="170" cy="34" ry="15" rx="6" fill="#FE411E" > 
          <animate attributeName="ry" dur="1s" begin="gr2.click" keyTimes=" 0;0.25;0.5;0.75;1" values="15;0;5;0;15" repeatCount="1" /> 
      </ellipse>  
                         <!-- Рот -->
      <ellipse cx="152" cy="75" ry="5" rx="6" fill="#FE411E" > 
         <animate attributeName="rx" dur="1s" begin="gr2.click" keyTimes=" 0;0.25;0.5;0.75;1" values="6;12;2;12;6" repeatCount="1" /> 
      </ellipse>
 </g>     
</svg>

БЛОГ НА HUSL

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

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