Help make the animation so that when you click on the div button, with a slowdown appears with the transformation [scale] from the size to increase to its normal state

  • And what's the problem? - Qwertiy ♦

2 answers 2

$('button').click(function() { $('div').addClass('anim-scale'); }) 
 div { transform: scale(0); width: 150px; height: 150px; border-radius: 50%; background-color: tomato; transition: 2s linear; } div.anim-scale { transform: scale(1); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button>Button</button> <div></div>

  • after all, really - beautiful things are made easy! - ikerya

There is another option in one script. But the variant soledar10 is more practical, as for me

 $('button').click(function() { $({scale: 0}).animate({scale: 1}, { duration: 1000, // скорость easing: 'linear', step: function(scale) { $('div').css('transform', 'scale('+scale+')') } }); }) 
 div { transform: scale(0); width: 150px; height: 150px; border-radius: 50%; background-color: tomato; transition: 2s linear; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Нажми</button> <div></div>

  • Thank you all - The Marafonskiy