Hiệu ứng ảnh tự zoom, animation, scale phần 1 full (ok)

<div class="slick-slide slick-current slick-active">
  <div class="slick-slide-bg elementor-ken-in"></div>
  <div class="slick-slide-inner">
    <div class="woovina-background-overlay"></div>
    <div class="woovina-slide-content">
      <div class="woovina-slide-heading">We Are Climbers</div>
      <div class="woovina-slide-description">I am slide content. Click edit button to change this text.
        <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <br> Ut elit tellus, luctus nec ullamcorper mattis, pulvinar.</div><a href="https://demo-14.woovinapro.com/shop/" class="elementor-button woovina-slide-button elementor-size-sm" tabindex="0">Shop Now</a>
    </div>
  </div>
</div>
<style>
.slick-slide {
  overflow: hidden;
  height: 400px;
  width: 450px;
}
@keyframes ken-burns-in {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  100% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
  }
}
.slick-slide-bg.elementor-ken-in {
  height: 400px;
  width: 100%;
  background-color: #bbbbbb;
  background-image: url(https://demo-14.woovinapro.com/wp-content/uploads/2019/08/slider-01-min.jpg);
  background-size: cover;
  animation-duration: calc(5000ms*1.2);
  transition-duration: calc(5000ms);
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-animation-name: ken-burns-in;
  animation-name: ken-burns-in;
}
</style>

Last updated