Масштабировать анимацию щелчка

Question

Поступайте мягко, я только начал и не смог найти подобную проблему ... по крайней мере, то, что я думаю, было бы решением;)

Итак, у меня есть робот, написанный на HTML и CSS, и я хочу анимировать его губы при нажатии. Идея состоит в том, чтобы сделать его похожим на форму kiss, поэтому мне нужно масштабировать ее до крошечного размера (1), а затем вернуть в нормальное состояние (2). Пока я действительно не знаю, как это сделать. Я попытался просто изменить ширину и высоту, но это не сработало. Я предполагаю, что мне нужно что-то сделать с transfort scaleX и scaleY, но я не знаю, что и как.

Это то, что у меня уже есть:

var lips = document.getElementById("lips");
lips.addEventListener("click", kiss);

function kiss(e) {
    var partRobo = e.target;
    var sizeX= 1;
    var sizeY= 1;
    
    var id = setInterval(action, 20);
    
    function action() {
        partRobo.style.transform = scale(sizeX, sizeY);
        sizeX-0.1;
        sizeY-0.1;
        
        if (sizeX === 0 && sizeY=== 0) {
            clearInterval(id);
        }
    }
}

Answer 1

Есть много способов сделать это, и вот один из них

document.querySelector("div").addEventListener("click", function () {
  this.style.transform = "scale(1.2)";
  setTimeout(()=>{
     this.style.transform = "scale(1)";
  },500)
});

div {
  width: 100px;
height: 100px;
background-color: red;
  transition: cubic-bezier(0, 2.28, 0.95, 0.69) 0.5s;
}

<div></div>

Answer 2

Вы можете использовать CSS анимацию , JS потребуется только для запуска анимации. Конечно, вы можете изменить продолжительность, функцию замедления и другие параметры анимации.

#lips {
  height: 50px;
  width: 100px;
  background: red;
  cursor: pointer;
}

.kiss {
  animation: kiss 4s;
}

@keyframes kiss {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

<div id="lips" onclick="this.classList.add('kiss')"></div>

Answer 3

Я бы сделал правило css по строкам

.lips-kiss {
    transform: scale(0.6);
}

, а затем в функции kiss применил и удалил класс. Итак, ваш код будет выглядеть так:

var lips = document.getElementById("lips");
lips.addEventListener("click", kiss);

function kiss() {
    lips.classList.add('lips-kiss');
    setTimeout(() => {
        lips.classList.remove('lips-kiss');
    }, 20);
}