Плавное увеличение картинки во все стороны из центра

[Saitama]

Здравствуйте, друзья.
Помогите решить вопрос.

Есть картинка 1.jpg

Как скриптом javascript - увеличить эту картинку из центра - во все стороны, медленно и плавно ( с сохранением пропорций) , до тех пор пока она не увеличится до 300% ?

(А затем произвести остановку.)

[ksa]

javascript - увеличить эту картинку из центра - во все стороны

https://myrusakov.ru/uvelichenie-kartinki-klik.html

медленно и плавно

Для этого есть варианты в ЦСС
http://shpargalkablog.ru/2011/05/kak...nie.html#close
или setTimeout()...

[Aetae]

<style>
html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}
.img {
  cursor: pointer;
  transition: transform 3s;
}
.scale {
  transform: scale(3);
}
</style>
<img class="img" src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" onclick="classList.toggle('scale')">

[Saitama]

Aetae,
А как сделать, чтобы картинка увеличивалась сразу же, не дожидаясь моего клика по ней ?

[рони]

Saitama,
onload вместо onclick

[Saitama]

Теперь все нормально, спасибо за ответы.