How do I animate a scale css property using jquery?

Question

I am trying to have a circle div with the class of \"bubble\" to pop when a button is clicked using jQuery. I want to get it to appear from nothing and grow to its full size

Answer 1

Currently you cannot use animate with the transform property see here

However you can add a css transition value and modify the css itself.

var scale = 1;
setInterval(function(){
  scale = scale == 1 ? 2 : 1
  $('.circle').css('transform', 'scale('+scale+')')
}, 1000)

.circle {
  margin: 20px auto;
  background-color: blue;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  transform: scale(1);
  transition: transform 250ms ease-in-out;
}