Анимирование SVG на CSS

Question

Хотел для сайта сделать анимацию, но так опыта в этом нет, пошел гуглить, почти ничего нет на чистый CSS. Единственное что я понял, это не легко выучить за 10 минут.

Может ли кто-то помочь мне сделать простенькую анимацию, и объяснить как вы это сделали?

Нужно чтобы волк моргал

Вот код SVG

<?xml-stylesheet type="text/css" href="/css/style.css"?>
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 2686 3591" style="enable-background:new 0 0 2686 3591;" xml:space="preserve">
<path class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z"/>
<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
<path class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>
</svg>

Примечание
Так получилось, что @DarkRou задал вопрос, который мне показался интересным. Я начал готовить ответ на локальном ПК и когда ответ через полтора часа был уже готов, обнаружил, что автор удалил его.
Я скопировал вопрос, орфография и стилистика автора вопроса сохранена

Answer 1

На CSS сделать анимацию моргания века мне представляется трудным делом и главное зачем мучиться, когда есть SVG, который для этого и приспособлен, - работать с кривыми Безье.

Основная техника реализации анимации,- это получить в векторном редакторе два path: начальный, когда открыто веко и финальный path, когда веко закрыто.

Для этого загружаем SVG в векторный редактор и рисуем открытое веко

Сохраняем начальный path в другой файл SVG, в котором будет реализована анимация

Перетаскиваем нижнюю линию века до полного закрытия глаза:

Пишем формулу анимации атрибута d path

<animate id="_animate"
       attributeName="d"
       begin="indefinite"
       dur="2s"
       repeatCount="3"
       values="
       path-veko-open;
       path-veko-close;
       path-veko-open"
       fill="freeze" />

Обратите внимание, что path разделены точкой с запятой, кроме последнего

Прорисовал ещё глаз с зрачком и добавил им градиенты

Ниже полный код:

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

<?xml-stylesheet type="text/css" href="/css/style.css"?>
<svg id="svg1" version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 2686 3591" style="enable-background:new 0 0 2686 3591;" xml:space="preserve">
<g fill="none" stroke="black" >
<defs>
 <radialGradient id="RG_pupil_Big" fx="50%" fy="50%">
   <stop offset="0%" stop-color="white" />
   <stop offset="100%" stop-color="skyblue" />
  </radialGradient> 
<radialGradient id="RG_bw" fx="50%" fy="50%">
   <stop offset="0%" stop-color="white" />
   <stop offset="100%" stop-color="black" />
  </radialGradient>  
  
</defs>


<path fill="#d5d5d5" class="head" 
 d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
 
 <path class="nose" fill="#4A1D1D" d="m2550.6 1349.5c-79.3-44.7-38.7 161.9 51.4 268.2 8.5 10 76-179 63.5-187-43.8-27.9-68.8-55.3-114.9-81.2z" />
<path fill="#F3EDFD" class="eye" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z"/>

<path class="pupil_Big" stroke="none" fill="url(#RG_pupil_Big)" d="m1560.1 1006.1a63.2 61.9 0 0 1-63.2 61.9 63.2 61.9 0 0 1-63.2-61.9 63.2 61.9 0 0 1 63.2-61.9 63.2 61.9 0 0 1 63.2 61.9zM1525.8 1002.7" class="s1"/>

<path  class="pupil" fill="url(#RG_bw)" d="m1525.8 1002.7a28.2 28.9 0 0 1-28.2 28.9 28.2 28.9 0 0 1-28.2-28.9 28.2 28.9 0 0 1 28.2-28.9 28.2 28.9 0 0 1 28.2 28.9z" class="s1"/>

<path class="eyelid" fill="#d3d3d3" stroke="2" d="m1389.9 899.5c-20.2-7.4 43.6 0.5 64.2 6.8 24 7.3 45 22.4 66.6 35.2 20.9 12.3 40.9 26.1 60.9 39.9 14.2 9.8 28.3 19.8 41.8 30.4 10.5 8.2 43.2 29.7 30.5 25.6-24-7.7-52.5-29.7-78.1-45.6-23.5-14.6-45.6-31.5-69.4-45.6-16.7-9.9-33.4-20.2-51.4-27.6-20.9-8.6-38.2-9.3-65.1-19.2z">  
    <!-- Анимация моргания века -->
  <animate
    attributeName="d"
	begin="svg1.click"
	dur="0.8s"
	fill="freeze"
	values="
	        m1389.9 899.5c-20.2-7.4 43.6 0.5 64.2 6.8 24 7.3 45 22.4 66.6 35.2 20.9 12.3 40.9 26.1 60.9 39.9 14.2 9.8 28.3 19.8 41.8 30.4 10.5 8.2 43.2 29.7 30.5 25.6-24-7.7-52.5-29.7-78.1-45.6-23.5-14.6-45.6-31.5-69.4-45.6-16.7-9.9-33.4-20.2-51.4-27.6-20.9-8.6-38.2-9.3-65.1-19.2z;
			
			m1389.9 899.5c-6.2-20.6 43.6 0.5 64.2 6.8 24 7.3 45 22.4 66.6 35.2 20.9 12.3 40.9 26.1 60.9 39.9 14.2 9.8 28.3 19.8 41.8 30.4 10.5 8.2 43.2 29.7 30.5 25.6-24-7.7-61.6 17.7-93.3 21.9-34.6 4.6-74 20.6-104.6 3.8-23.1-12.7-29.7-44.1-39.9-68.5C1403.3 964.4 1401.7 938.8 1389.9 899.5Z;
			
			m1389.9 899.5c-6.2-20.6 43.6 0.5 64.2 6.8 24 7.3 45 22.4 66.6 35.2 20.9 12.3 40.9 26.1 60.9 39.9 14.2 9.8 28.3 19.8 41.8 30.4 10.5 8.2 43.2 29.7 30.5 25.6-24-7.7-61.6 17.7-93.3 21.9-34.6 4.6-74 20.6-104.6 3.8-23.1-12.7-29.7-44.1-39.9-68.5C1403.3 964.4 1401.7 938.8 1389.9 899.5Z;
			
			m1389.9 899.5c-20.2-7.4 43.6 0.5 64.2 6.8 24 7.3 45 22.4 66.6 35.2 20.9 12.3 40.9 26.1 60.9 39.9 14.2 9.8 28.3 19.8 41.8 30.4 10.5 8.2 43.2 29.7 30.5 25.6-24-7.7-52.5-29.7-78.1-45.6-23.5-14.6-45.6-31.5-69.4-45.6-16.7-9.9-33.4-20.2-51.4-27.6-20.9-8.6-38.2-9.3-65.1-19.2z"
			repeatCount="3" 
					  
			/>
</path>
</g>
</svg>

Answer 2

CSS. Конечно, можно сделать и чище, и угловатости убрать, и максимально приблизить его к глазику, который нарисован на svg. Думаю, что все-таки на css его можно повторить. Но на это нужно больше времени. А так, на скорую руку, как есть, причем это ещё и минимальными средствами css.

И тоже умеет моргать, просто наведите на него

Мой ответ ни на что не претендует, в конкурсе не участвует. Лишь хотелось чуть-чуть воспроизвести эту работу на css, возможности которого иногда не стоит недооценивать))

body {
  background-color: #d5d5d5;
}

.eye {
  position: absolute;
  top: 27%;
  left: 54%;
  width: 250px;
  height: 250px;
  background-color: #a6a6a6;
  border-radius: 0 100% 0 50% / 0 100% 0 60%;
  transform: rotate(-15deg) translate(-50%, -50%);
  -webkit-clip-path: polygon(0 1%, 20% 15%, 100% 100%, 0 100%);
  clip-path: polygon(0 1%, 20% 15%, 100% 100%, 0 100%);
}

.eye:before {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 2px;
  right: 4px;
  bottom: 2px;
  background-color: #f3edfd;
  border-radius: 0 100% 0 50% / 0 100% 0 60%;
  -webkit-clip-path: polygon(0 1%, 20% 15%, 100% 100%, 0 100%);
  clip-path: polygon(0 1%, 20% 15%, 100% 100%, 0 100%);
}

.iris {
  position: absolute;
  top: 110px;
  left: 30px;
  width: 114px;
  height: 114px;
  border-radius: 100%;
  background: rgb(255, 255, 255);
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(145, 210, 236, 1) 80%);
}

.iris:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background: rgb(255, 255, 255);
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 5%, rgba(0, 0, 0, 1) 60%);
}

.eyelid {
  position: absolute;
  top: 4px;
  left: 2px;
  right: 4px;
  bottom: 2px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-color: #a6a6a6;
  border-radius: 0 100% 0 50% / 0 100% 0 60%;
  -webkit-clip-path: polygon(0 1%, 20% 15%, 100% 100%, 99% 100%, 20% 20%);
  clip-path: polygon(0 1%, 20% 15%, 100% 100%, 99% 100%, 20% 20%);
  transition: clip-path 0.3s;
}

.eyelid:before {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background-color: #d5d5d5;
  border-radius: 0 100% 0 50% / 0 100% 0 60%;
  -webkit-clip-path: polygon(1% 1%, 20% 14%, 100% 100%, 99% 99%, 21% 20%);
  clip-path: polygon(1% 1%, 20% 14%, 100% 100%, 99% 99%, 21% 20%);
  transition: all 0.3s;
}

.eye:hover .eyelid {
  animation: blink__eyelid 0.6s;
  animation-iteration-count: 2;
}

.eye:hover .eyelid:before {
  animation: blink__eyelid__before 0.6s;
  animation-iteration-count: 2;
}

@keyframes blink__eyelid {
  0% {
    -webkit-clip-path: polygon(0 1%, 20% 15%, 100% 100%, 99% 100%, 20% 20%);
    clip-path: polygon(0 1%, 20% 15%, 100% 100%, 99% 100%, 20% 20%);
  }
  30% {
    -webkit-clip-path: polygon(0 0%, 20% 15%, 100% 100%, 99% 100%, 0% 100%);
    clip-path: polygon(0 0%, 20% 15%, 100% 100%, 99% 100%, 0% 100%);
  }
}

@keyframes blink__eyelid__before {
  0% {
    -webkit-clip-path: polygon(1% 1%, 20% 14%, 100% 100%, 99% 99%, 21% 20%);
    clip-path: polygon(1% 1%, 20% 14%, 100% 100%, 99% 99%, 21% 20%);
  }
  30% {
    -webkit-clip-path: polygon(1% 1%, 20% 14%, 100% 100%, 99% 99%, 0% 99%);
    clip-path: polygon(1% 1%, 20% 14%, 100% 100%, 99% 99%, 0% 99%);
  }
}

<div class="eye">
  <div class="iris"></div>
  <div class="eyelid"></div>
</div>

Answer 3

Вариант ответа на вопрос ТС

Нужно чтобы волк моргал

В этом варианте я попытался оживить моргание века глаза волка.

При первом закрывании века, окраска глазного яблока волка находится в исходном состоянии
При открывании века глаз наливается кровью
При закрывании века окраска глазного яблока волка возвращается в исходное состояние.

Чтобы реализовать эту логику я использовал логические цепочки в команде begin

<path  class="eye" opacity="0.1" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z">
                <!-- Анимация заполнения глазного яблока -->
  <animate id="an_op" attributeName="opacity" begin="an_veko.end" dur="4s" values="0.1;1;1;1;0" repeatCount="1" restart="whenNotActive" />
</path>

begin="an_veko.end" - окраска начинается после завершения анимации закрытия века

Анимация открытия, закрытия века

begin="svg1.click;an_op.end-1s"

Первый запуск анимации - клик по холсту SVG - svg1.click
Второй запуск анимации - после окончания анимации закраски глазного яблока - an_op.end-1s
Этим достигается зацикливание анимаций закрытия века и окраски глазного века.
Секунда вычитается для частичного смещения анимаций.

Такая техника тайминга анимаций SVG позволяет легко, в любой момент сменить логику начала, продолжения, окончания анимаций.
Не нужны мучительные высчитывания тайминга, как это делается в CSS анимациях при изменении логики.

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

.container {
width:50vw;
height:auto;
background:#DBDBDB;
}

.eye {
 fill:url(#pupil_shine);

}

<div class="container">
<svg id="svg1" version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 2686 3591" style="enable-background:new 0 0 2686 3591;" xml:space="preserve">
<g fill="none" stroke="black" >
<defs>
 
 <radialGradient id="pupil_shine" fx="50%" fy="50%"  >
   <stop offset="20%" stop-color="#2A2400"  />
   <stop offset="100%" stop-color="red" />
  </radialGradient> 

    </radialGradient>  
	   <!-- Градиент для зрачка old -->
	<radialGradient id="RG_bw" fx="50%" fy="50%">
   <stop offset="0%" stop-color="white" />
   <stop offset="70%" stop-color="#111111" />
  </radialGradient> 
	       <!-- Градиент для радужки зрачка -->
	<radialGradient id="eyeballGrad" fx="50%" fy="50%" r="100%" 
                    fx="50%" fy="50%" r="100%" >
      <stop offset="30%" stop-color="#B56930"/>
        <stop offset="60%" stop-color="gold"/>	  
   </radialGradient>	  
  
</defs>


<path fill="#4D4D4D" class="head" 
 d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
 
 <path class="nose" fill="#4A1D1D" d="m2550.6 1349.5c-79.3-44.7-38.7 161.9 51.4 268.2 8.5 10 76-179 63.5-187-43.8-27.9-68.8-55.3-114.9-81.2z" />


                       <!-- Внешний контур глаза -->
<path  class="eye" opacity="0.1" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z">
                <!-- Анимация заполнения глазного яблока -->
  <animate id="an_op" attributeName="opacity" begin="an_veko.end" dur="4s" values="0.1;1;1;1;0" repeatCount="1" restart="whenNotActive" />
</path>

<g transform="translate(-5 8)">
                                <!-- радужки зрачка       -->

<path class="pupil_Big" stroke="none" fill="url(#eyeballGrad)" d="m1560.1 1006.1a63.2 61.9 0 0 1-63.2 61.9 63.2 61.9 0 0 1-63.2-61.9 63.2 61.9 0 0 1 63.2-61.9 63.2 61.9 0 0 1 63.2 61.9zM1525.8 1002.7" class="s1"/>
                       <!-- Чёрный зрачок -->
<path  class="pupil" fill="url(#RG_bw)" d="m1527.1 1006.8a31.6 33 0 0 1-31.6 33 31.6 33 0 0 1-31.6-33 31.6 33 0 0 1 31.6-33 31.6 33 0 0 1 31.6 33z" class="s1"/>
</g>
                    <!-- Веко -->

<path class="eyelid" fill="#7D7D7D" stroke="2" d="m1389.9 899.5c-20.2-7.4 43.6 0.5 64.2 6.8 24 7.3 45 22.4 66.6 35.2 20.9 12.3 40.9 26.1 60.9 39.9 14.2 9.8 28.3 19.8 41.8 30.4 10.5 8.2 43.2 29.7 30.5 25.6-24-7.7-52.5-29.7-78.1-45.6-23.5-14.6-45.6-31.5-69.4-45.6-16.7-9.9-33.4-20.2-51.4-27.6-20.9-8.6-38.2-9.3-65.1-19.2z">  
    <!-- Анимация моргания века -->
  <animate id="an_veko"
    attributeName="d"
	begin="svg1.click;an_op.end-1s"
	dur="4s"
	fill="freeze"
	values="
	        m1389.9 899.5c-20.2-7.4 43.6 0.5 64.2 6.8 24 7.3 45 22.4 66.6 35.2 20.9 12.3 40.9 26.1 60.9 39.9 14.2 9.8 28.3 19.8 41.8 30.4 10.5 8.2 43.2 29.7 30.5 25.6-24-7.7-52.5-29.7-78.1-45.6-23.5-14.6-45.6-31.5-69.4-45.6-16.7-9.9-33.4-20.2-51.4-27.6-20.9-8.6-38.2-9.3-65.1-19.2z;
			
			m1389.9 899.5c-6.2-20.6 43.6 0.5 64.2 6.8 24 7.3 45 22.4 66.6 35.2 20.9 12.3 40.9 26.1 60.9 39.9 14.2 9.8 28.3 19.8 41.8 30.4 10.5 8.2 43.2 29.7 30.5 25.6-24-7.7-61.6 17.7-93.3 21.9-34.6 4.6-74 20.6-104.6 3.8-23.1-12.7-29.7-44.1-39.9-68.5C1403.3 964.4 1401.7 938.8 1389.9 899.5Z;
			
			m1389.9 899.5c-6.2-20.6 43.6 0.5 64.2 6.8 24 7.3 45 22.4 66.6 35.2 20.9 12.3 40.9 26.1 60.9 39.9 14.2 9.8 28.3 19.8 41.8 30.4 10.5 8.2 43.2 29.7 30.5 25.6-24-7.7-61.6 17.7-93.3 21.9-34.6 4.6-74 20.6-104.6 3.8-23.1-12.7-29.7-44.1-39.9-68.5C1403.3 964.4 1401.7 938.8 1389.9 899.5Z;
			
			m1389.9 899.5c-20.2-7.4 43.6 0.5 64.2 6.8 24 7.3 45 22.4 66.6 35.2 20.9 12.3 40.9 26.1 60.9 39.9 14.2 9.8 28.3 19.8 41.8 30.4 10.5 8.2 43.2 29.7 30.5 25.6-24-7.7-52.5-29.7-78.1-45.6-23.5-14.6-45.6-31.5-69.4-45.6-16.7-9.9-33.4-20.2-51.4-27.6-20.9-8.6-38.2-9.3-65.1-19.2z"
			repeatCount="1"
			restart="whenNotActive" 
					  
			/>
</path>
</g>
</svg>
</div>

БЛОГ НА HUSL

Анимирование SVG на CSS

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