5

Хотел для сайта сделать анимацию, но так опыта в этом нет, пошел гуглить, почти ничего нет на чистый 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 задал вопрос, который мне показался интересным. Я начал готовить ответ на локальном ПК и когда ответ через полтора часа был уже готов, обнаружил, что автор удалил его.
Я скопировал вопрос, орфография и стилистика автора вопроса сохранена

4

3 ответа 3

8

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

5
  • Извиняюсь, тк за несколько часов почти не было просмотров, и мой вопрос уехал далеко за первую-вторую страницу в списке, посчитал что никому он не интересен, удалил, и попробовал на хабре задать вопрос. Вопрос про "Values" в анимации. Откуда взять эти координаты? На каждый кадр сохранять отдельный файл и копировать их в анимацию? Или нужна только конечная координата? Ладно, в любом случае спасибо. Сейчас попробую сделать по своему
    – DarkRou
    2 апр 2020 в 4:36
  • @DarkRou автор ответа очень постарался...готовил ответ ..поставь ему плюсик и отметь решением ..а что бы уточнить детали - задай ему вопрос в личном чате 2 апр 2020 в 4:51
  • @MaximLensky личный чат? Можно поподробнее пожалуйста? Я просто не сильно разбираюсь пока в SO
    – DarkRou
    2 апр 2020 в 4:55
  • 1
    @DarkRou chat.stackexchange.com/rooms/70612/svg-chat 2 апр 2020 в 4:56
  • @DarkRou он как появится обязательно ответит - не переживай 2 апр 2020 в 4:57
3

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>

1
  • на полигоне до фига делов глаз рисовать - много точек делать ... 9 апр 2020 в 17:42
3
+100

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

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

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

  1. При первом закрывании века, окраска глазного яблока волка находится в исходном состоянии
  2. При открывании века глаз наливается кровью
  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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.