Как сделать эффект плавного масштабирования в html?

Question

Я хочу сделать переход масштабирования более плавным на видео, которое я увеличил с помощью transform:scale(val), поскольку вы можете видеть, что переход происходит напрямую, без какой-либо плавности.

let scale = 1;
$('.plus').on('click',function(){
	$('.sample_video').css('transform','scale('+(scale+=0.25)+')');
});
$('.minus').on('click',function(){
	$('.sample_video').css('transform','scale('+(scale-=0.25)+')');
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}
.btnDiv {
  position:fixed;
  bottom:0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="sample_video" controls src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" autoplay>
</video>
<div class="btnDiv">
<button class="plus">
zoom in
</button>
<button class="minus">
zoom out
</button>
</div>

Answer 1

Чтобы сгладить эффект масштабирования, вы можете использовать свойство transition в CSS:

.sample_video {
  transition: transform 0.3s;
}

let scale = 1;
$('.plus').on('click', function() {
  $('.sample_video').css('transform', 'scale(' + (scale += 0.25) + ')');
});
$('.minus').on('click', function() {
  $('.sample_video').css('transform', 'scale(' + (scale -= 0.25) + ')');
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.btnDiv {
  position: fixed;
  bottom: 0px;
}

.sample_video {
  transition: transform 0.3s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="sample_video" controls src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" autoplay>
</video>
<div class="btnDiv">
  <button class="plus">
zoom in
</button>
  <button class="minus">
zoom out
</button>
</div>