Как лучше всего иметь масштаб объекта, а затем выполнить анимацию отскока при этом коэффициенте масштабирования, прежде чем вернуться к исходному коэффициенту масштабирования. Я понимаю, что мог бы сделать что-то вроде масштабирования до 2,2, затем до 1,8, затем до 2,0, но я ищу способ, при котором вам просто нужно выполнить анимацию отскока для масштабного коэффициента, потому что мой масштабный коэффициент изменится.
Вот мой пример. По сути, я хочу объединить эти два для работы, как я сказал, но, как вы можете видеть, анимация отскока выполняется на основе размера изображения до масштабирования.
Мне нужно, чтобы все стороны изображения отразились одинаково, как в примере.
function myFunction() {
var image = document.getElementById('test');
image.style.WebkitTransform = ('scale(2,2)');
image.classList.remove('bounce');
image.offsetWidth = image.offsetWidth;
image.classList.add('bounce') ;
}
div#test {
position:relative;
display: block;
width: 50px;
height: 50px;
background-color: blue;
margin: 50px auto;
transition-duration: 1s;
}
.bounce {
animation: bounce 450ms;
animation-timing-function: linear;
}
@keyframes bounce{
25%{transform: scale(1.15);}
50%{transform: scale(0.9);}
75%{transform: scale(1.1);}
100%{transform: scale(1.0);}
}
<div id='test'> </div>
<button class = 'butt' onclick = 'myFunction()'>FIRST</button>