Как сделать анимацию падающей капли воды?

Question

Я хочу реализовать анимацию падающей капли воды.

Капля имеет вначале круглую форму, затем постепенно вытягивается вниз до момента отрыва от поверхности и падает вниз.
У меня получилось сделать анимацию изменения формы капли от круглой до вытянутой с помощью изменения атрибута d в path.

<svg xmlns="http://www.w3.org/2000/svg" width="332" height="412" viewBox="0 0 332 412"> 
<defs>
 <radialGradient id="rg" r="1" fx="0.25" fy="0.5">
              <stop offset="0%" stop-color="white"></stop>
              <stop offset="75%" stop-color="#1B7FE4"></stop>
               </radialGradient> 
  </defs>
<path id="pathX" fill="url(#rg)" d="m 228.82,126.17 c 0,0 -11.21426,-24.27631 -54.17763,-36.049322 -6.26889,-1.717829 -34.05856,-0.314692 -40.44915,0.872881 C 106.06884,96.219957 84.38,126.17 84.38,126.17 c -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33">
<animate
  attributeName="d"
  begin="0s"
  dur="4s"
  repeatCount="indefinite"
  values="
     m 228.82,126.17 c 0,0 -11.21426,-24.27631 -54.17763,-36.049322 -6.26889,-1.717829 -34.05856,-0.314692 -40.44915,0.872881 C 106.06884,96.219957 84.38,126.17 84.38,126.17 c -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33;
   
   m 228.82,126.17 c 0,0 -36.96426,-56.572924 -62.47,-86.24 -4.23749,-4.928853 -15.48617,-5.112646 -19.5,0 -21.57777,27.484873 -62.47,86.24 -62.47,86.24 -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33;
   m 228.82,126.17 c 0,0 -11.21426,-24.27631 -54.17763,-36.049322 -6.26889,-1.717829 -34.05856,-0.314692 -40.44915,0.872881 C 106.06884,96.219957 84.38,126.17 84.38,126.17 c -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33;
    " /> 
</path> 
</svg>

Как реализовать неравномерную анимацию падения капли?
Анимация в момент отрыва капли должна быть медленной и в падении ускоряться после отрыва от поверхности.

Answer 1

Для того, чтобы было одновременное выполнение двух действий:

изменение формы и
падение капли, необходимо запустить параллельно две анимации:

Первая анимация будет изменять форму капли, а вторая анимация реализовывать её падение:

<animateTransform id="an2" attributeName="transform" type="translate"
   dur="3s" begin="an1.begin" values="0,0;0,60;0,1680" keyTimes="0;0.85;1" />

Неравномерность скорости падения капли, - сначала очень медленно, а затем быстро, помогает реализовать атрибут keyTimes="0;0.85;1"

На первом этапе, когда капля вытягивается по вертикали от 0 до 60 (см. атрибут values) проходит 85% времени анимации. Поэтому анимация идет медленно.
На второй этап анимации остается всего 15% времени, поэтому анимация идёт быстро.

<svg xmlns="http://www.w3.org/2000/svg" width="332" height="412" viewBox="0 0 1238 1648" >
<defs>
 <radialGradient id="rg" r="1" fx="0.25" fy="0.5">
              <stop offset="0%" stop-color="white"></stop>
              <stop offset="75%" stop-color="#1B7FE4"></stop>
             
  </defs>
<polyline points="615,85 1238,30" stroke="#0F4982" stroke-width="36" stroke-linecap="round" />
<g transform="translate(450,0)">
<path  fill="url(#rg)" id="pathX" >

  <!-- Анимация изменения формы капли -->
<animate id="an1"
  attributeName="d"
  begin="0s;an2.end+0.5s"
  dur="3s"
  repeatCount="1"
  values="
     m 228.82,126.17 c 0,0 -11.21426,-24.27631 -54.17763,-36.049322 -6.26889,-1.717829 -34.05856,-0.314692 -40.44915,0.872881 C 106.06884,96.219957 84.38,126.17 84.38,126.17 c -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33;
   
   m 228.82,126.17 c 0,0 -36.96426,-56.572924 -62.47,-86.24 -4.23749,-4.928853 -15.48617,-5.112646 -19.5,0 -21.57777,27.484873 -62.47,86.24 -62.47,86.24 -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33;" />  
   <!-- Анимация падения капли -->
 <animateTransform id="an2" attributeName="transform" type="translate" dur="3s" begin="an1.begin" values="0,0;0,60;0,1680" keyTimes="0;0.85;1" />   
</path>
</g> 

</svg>

Связанный ответ, сделан полностью на CSS: Как сделать баннер с капающим краном

Answer 2

Вариант CSS:

* {margin: 0; padding: 0;}

.home {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}


/*Крыша*/

.home:before {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
  right: -40px;
  width: 200px;
  height: 10px;
  border-radius: 10px;
  background: darkolivegreen;
  transform: rotate(-15deg);
}


/*Лужа*/

.home:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  border-radius: 200% 500% 0 0;
  background: lightskyblue;
  animation: home 3s infinite;
}

@-webkit-keyframes home {
  0% {
    height: 15px;
    border-radius: 0;
  }
  20% {
    height: 10px;
    border-radius: 200% 500% 0 0;
  }
  98% {
    height: 10px;
    border-radius: 200% 500% 0 0;
  }
  100% {
    height: 5px;
    border-radius: 0;
  }
}


/*Капля*/

.drop {
  z-index: -1;
  position: absolute;
  right: 128px;
  top: 38px;
  width: 50px;
  height: 50px;
  background-color: skyblue;
  border-radius: 0 25px 25px 25px;
  transform: rotate(45deg) skewY(0deg);
  box-shadow: 1px 1px 5px rgb(0, 0, 0, 0.2);
  animation: drop 3s infinite;
}

.drop:before {
  content: '';
  display: block;
  position: absolute;
  top: 35%;
  left: 10%;
  height: 55%;
  width: 35%;
  border-radius: 100%;
  transform: rotate(-35deg);
  background-color: rgba(255, 255, 255, 0.8);
  filter: blur(5px);
}

@-webkit-keyframes drop {
  0% {
    top: 38px;
    border-radius: 50px;
    transform: rotate(45deg) skewY(0deg);
  }
  50% {
    top: 58px;
    border-radius: 5px 25px 25px 25px;
  }
  90% {
    top: 60px;
    border-radius: 5px 25px 25px 25px;
    transform: rotate(40deg) skewY(10deg);
  }
  95% {
    top: calc(100% - 20px);
    border-radius: 5px 25px 25px 25px;
    transform: rotate(40deg) skewY(10deg);
  }
  98% {
    top: calc(100% - 40px);
    border-radius: 10px 25px 25px 25px;
    transform: rotate(0deg) skewY(0deg) scale(0.7, 1);
  }
  100% {
    top: calc(100% - 40px);
    border-radius: 10px 25px 25px 25px;
    transform: rotate(0deg) skewY(0deg) scale(3, 0.1);
  }
}

<div class="home"><div class="drop"></div></div>

БЛОГ НА HUSL

Как сделать анимацию падающей капли воды?

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