How do I animate a scale css property using jquery?

Using the step callback and a counter. Here the counter is just the number 1.
'now' will be 0 to 1 over 5000ms.

$('.bubble').animate({transform: 1},
{duration:5000,easing:'linear',
step: function(now, fx) {
$(this).css('transform','scale('+now+')')}
})

Vanilla JS animate method (supported in modern browsers, no IE)

https://drafts.csswg.org/web-animations-1/#the-animation-interface

$('.bubble').get(0).animate([{"transform": "scale(1)"}],
{duration: 5000,easing:'linear'})

Better go with CSS3 Animations. For animation at a frequent interval you can use with browser supporting prefixes(-webkit,-moz,etc.)-

@keyframes fullScale{
    from{
        transform:scale(0);
    }
    to{
        transform:scale(1);
    }
}
.bubble:hover{
    animation: fullScale 5s;
}

Refer this link- http://www.w3schools.com/css/css3_animations.asp

Or the above solution by @Rory is also a good way to addclass on an attached event.


You can perform the transition using CSS and then just use Javascript as the 'switch' which adds the class to start the animation. Try this:

$('button').click(function() {
  $('.bubble').toggleClass('animate');
})
.bubble {
  transform: scale(0);
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: #C00;
  transition: all 5s;
}

.bubble.animate {
  transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Toggle</button>
<div class='col-lg-2 col-md-2 well bubble'></div>

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle"></div>