触发水 animation 按钮点击 CSS

Question

I'm trying to apply water filling effect when clicked on the button using 4 steps like 25% , 50% , 75% and 100% . Is it possible with below CSS animation?

Could anyone please help?

 #banner { border-radius: 50%; width: 150px; height: 150px; background: #000; overflow: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); } #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 id="banner"> <div class="fill"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> <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"/> </svg> </div> </div> <div><br/><button>Add water</button></div>

Answer 1

you need javascript to add interaction on button, like this

 var fillPortion = 0 // the first state is 0% document.getElementById('add-water-btn').addEventListener('click', () => { let height = document.getElementById('banner').clientHeight // get container height // prevent added more than 100% if (fillPortion < 100) { fillPortion += 25 // added 25% on every click // since the translate Y is backward (full is 0px, empty is 150px), then the fill portion must be backward to (the first click is 75%, second click is 50%, last click is 0%) document.querySelector('#banner.fill').style.transform = 'translate(0, ' + ((100 - fillPortion) / 100) * height + 'px)' } else { // add code if already full } })

 #banner { border-radius: 50%; width: 150px; height: 150px; background: #000; overflow: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); } /* add first state */ #banner.fill{ transform: translate(0, 150px); transition: all cubic-bezier(.2, .6, .8, .4) 4s; } /* run animation when class.animate added */ /* EDIT: you dont need animation because it can be done only with transform translate */ /* #banner.fill.animate{ 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 id="banner"> <div class="fill"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> <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"/> </svg> </div> </div> <!-- add id on button to make DOM interaction easier --> <div><br/><button id="add-water-btn">Add water</button></div>

Answer 2

Change your this " #banner.fill " to ".fill-animation" and toggle them on btn click

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

//JS

const btn = document.querySelector('button');
const fill = document.querySelector('.fill');

btn.addEventListener('click',()=>{
  
      fill.classList.remove('fill-animation')
      setTimeout(()=>{
           fill.classList.add('fill-animation')
      },10) 
  
})