Изменить высоту анимации заполнения SVG в зависимости от класса CSS

Question

Я использую следующий код SVG и CSS для анимации уровня заполнения фигуры SVG.

.st0 {
  fill: none;
  stroke: #000000;
  stroke-width: 4;
  stroke-miterlimit: 5;
}

.st1 {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  stroke-miterlimit: 5;
}

#logo2 {
  width: 150px !important;
  height: 150px !important;
  position: relative;
  margin-top: -100px;
}

#banner {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background: #fff;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  z-index: -1;
  margin-bottom: -50px;
}

#banner .fill {
  animation-name: fillAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

#banner #waveShape {
  animation-name: waveAction;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  width: 300px;
  height: 150px;
  fill: #04ACFF;
}

@keyframes fillAction {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, -5px);
  }
}

@keyframes waveAction {
  0% {
    transform: translate(-150px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

<div>
  <div id="banner">
    <div>
      <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">

          <defs>
<clipPath id="drop">
                <path transform="scale(0.75), translate(32,0)"
                  d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
                    C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
                    c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
                    H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
              </clipPath>
          </defs>

          <g clip-path="url(#drop)">
        <g class="fill">
          <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
        </g>
      </g>
      <g transform="scale(0.75), translate(32,0)">
        <path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />

      </g>
        </svg>
    </div>
  </div>
</div>

Я пытаюсь и терплю неудачу в том, чтобы изменить высоту анимации «уровня воды».

Таким образом, предпочтительным результатом будет изменение высоты анимации с помощью класса CSS, чтобы я мог анимировать 75% или 25% уровня заполнения.Я пытался изменить высоту с помощью CSS, но это игнорируется.

Answer 1

Изменяя воспроизводимую анимацию, вы можете изменить уровень, до которого она будет подниматься.Изменяя анимацию, воспроизводимую добавлением дополнительного класса, вы можете решить, какой из них воспроизводить.

Я изменил волновую анимацию, чтобы она прекратилась, потому что она заставила меня страдать от морской болезни.

Ключевые моменты:

Я изменил стиль анимации, добавив дополнительный класс, который должен использоваться вместе с классом заливки.Это позволит вам выбрать, какой класс использовать для какой анимации.

.fill.fill-25 {
    animation-name: fillAction25;
}
.fill.fill-50 {
    animation-name: fillAction50;
}
.fill.fill-75 {
    animation-name: fillAction75;
}

Затем я изменил высоту перевода анимаций для соответствующих ключевых кадров.Вы также можете использовать метод calc там calc(155px / 100 * 25) для вычисления пользовательских процентов.

@keyframes fillAction25 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 115px);
  }
}
@keyframes fillAction50 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 85px);
  }
}
@keyframes fillAction75 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 45px);
  }
}

.st0 {
  fill: none;
  stroke: #000000;
  stroke-width: 4;
  stroke-miterlimit: 5;
}

.st1 {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  stroke-miterlimit: 5;
}

#logo2 {
  width: 150px !important;
  height: 150px !important;
  position: relative;
  margin-top: -100px;
}

#banner {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background: #fff;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  z-index: -1;
  margin-bottom: -50px;
}

.fill {
  animation-name: fillAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

.fill.fill-25 {
    animation-name: fillAction25;
}
.fill.fill-50 {
    animation-name: fillAction50;
}
.fill.fill-75 {
    animation-name: fillAction75;
}

#banner #waveShape {
  animation-name: waveAction;
  animation-iteration-count: 10;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  width: 300px;
  height: 150px;
  fill: #04ACFF;
}

@keyframes fillAction {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, -5px);
  }
}

hr {
margin-top:50px;
}
@keyframes fillAction25 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 115px);
  }
}
@keyframes fillAction50 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 85px);
  }
}
@keyframes fillAction75 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 45px);
  }
}

@keyframes waveAction {
  0% {
    transform: translate(-150px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

<div>
  <div id="banner">
    <div>
      <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">

          <defs>
<clipPath id="drop">
                <path transform="scale(0.75), translate(32,0)"
                  d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
                    C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
                    c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
                    H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
              </clipPath>
          </defs>

          <g clip-path="url(#drop)">
        <g class="fill fill-25">
          <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
        </g>
      </g>
      <g transform="scale(0.75), translate(32,0)">
        <path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />

      </g>
        </svg>
    </div>
  </div>
  <hr>
  <div id="banner">
    <div>
      <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">

          <defs>
<clipPath id="drop">
                <path transform="scale(0.75), translate(32,0)"
                  d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
                    C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
                    c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
                    H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
              </clipPath>
          </defs>

          <g clip-path="url(#drop)">
        <g class="fill fill-50">
          <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
        </g>
      </g>
      <g transform="scale(0.75), translate(32,0)">
        <path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />

      </g>
        </svg>
    </div>
  </div>
  <hr>
  <div id="banner">
    <div>
      <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">

          <defs>
<clipPath id="drop">
                <path transform="scale(0.75), translate(32,0)"
                  d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
                    C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
                    c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
                    H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
              </clipPath>
          </defs>

          <g clip-path="url(#drop)">
        <g class="fill fill-75">
          <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
        </g>
      </g>
      <g transform="scale(0.75), translate(32,0)">
        <path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />

      </g>
        </svg>
    </div>
  </div>
</div>

Использовать с методом расчета

.st0 {
  fill: none;
  stroke: #000000;
  stroke-width: 4;
  stroke-miterlimit: 5;
}

.st1 {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  stroke-miterlimit: 5;
}

#logo2 {
  width: 150px !important;
  height: 150px !important;
  position: relative;
  margin-top: -100px;
}

#banner {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background: #fff;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  z-index: -1;
  margin-bottom: -50px;
}

.fill {
  animation-name: fillAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

.fill.fill-25 {
    animation-name: fillAction25;
}
.fill.fill-50 {
    animation-name: fillAction50;
}
.fill.fill-75 {
    animation-name: fillAction75;
}

#banner #waveShape {
  animation-name: waveAction;
  animation-iteration-count: 10;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  width: 300px;
  height: 150px;
  fill: #04ACFF;
}

@keyframes fillAction {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, -5px);
  }
}

hr {
margin-top:50px;
}
@keyframes fillAction25 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, calc(155px / 100 * 25));
  }
}
@keyframes fillAction50 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, calc(155px / 100 * 50));
  }
}
@keyframes fillAction75 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, calc(155px / 100 * 75));
  }
}

@keyframes waveAction {
  0% {
    transform: translate(-150px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

<div>
  <div id="banner">
    <div>
      <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">

          <defs>
<clipPath id="drop">
                <path transform="scale(0.75), translate(32,0)"
                  d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
                    C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
                    c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
                    H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
              </clipPath>
          </defs>

          <g clip-path="url(#drop)">
        <g class="fill fill-25">
          <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
        </g>
      </g>
      <g transform="scale(0.75), translate(32,0)">
        <path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />

      </g>
        </svg>
    </div>
  </div>
  <hr>
  <div id="banner">
    <div>
      <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">

          <defs>
<clipPath id="drop">
                <path transform="scale(0.75), translate(32,0)"
                  d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
                    C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
                    c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
                    H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
              </clipPath>
          </defs>

          <g clip-path="url(#drop)">
        <g class="fill fill-50">
          <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
        </g>
      </g>
      <g transform="scale(0.75), translate(32,0)">
        <path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />

      </g>
        </svg>
    </div>
  </div>
  <hr>
  <div id="banner">
    <div>
      <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">

          <defs>
<clipPath id="drop">
                <path transform="scale(0.75), translate(32,0)"
                  d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
                    C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
                    c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
                    H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
              </clipPath>
          </defs>

          <g clip-path="url(#drop)">
        <g class="fill fill-75">
          <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
        </g>
      </g>
      <g transform="scale(0.75), translate(32,0)">
        <path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />

      </g>
        </svg>
    </div>
  </div>
</div>