如何使用CSS过渡使背景从中心向外缩放

<div class="container"></div>

.container {
  width: 100%;
  height: 100vh;
  background-image: url(背景图片的URL);
  background-size: cover;
  background-position: center;
}

.container {
  /* 其他样式 */
  transition: background-size 0.5s ease-in-out;
}

.container.active {
  background-size: 200%;
}

var container = document.querySelector('.container');
container.addEventListener('click', function() {
  container.classList.toggle('active');
});