How do I animate a scale css property using jquery?
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>
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.