如何做图像自动放大，动画和缩放使用JQuery？

Question

我正在处理Jquery动画，其中包括图像放大，暂停，提供动画和缩放。怎么做？我希望我的图像放大，然后暂停一些秒，在暂停的几秒钟，我想应用我的动画，在完成我的动画，我想放大。怎么做？？我的代码如下：

<div class="home2 container-fluid">
   <h3 class="title">Safety</h3>
   <p class="des"> HI </p>  
</div>

我的CSS如下：

@keyframes breath {
    0%   { background-size: 100% 100%; }
    50% { background-size: 120% 120%; }
    100% { background-size: 100% 100%; }
}
.home2 {

   background-image:url("../img/sofa2.jpg");
   background-size:100% 100%;
   background-repeat: no-repeat; 
   height:100vh;
   width:100%;
   animation: breath 7s linear infinite;
   top:0;
   left:0;
}

目前，它只适用于放大和放大，请帮助我做this..in前进。

Answer 1

@keyframes breath {
  0% { transform: scale(0); }
  50% { transform: scale(1); }
  100% { transform: scale(0); }
}

也许你需要这个？

transfrom 添加，使用和

.home2 {
  background-image:url("../img/sofa2.jpg");
  background-size:100% 100%;
  background-repeat: no-repeat; 
  height:100vh;
  width:100%;
  transition: 3.5s all linear;
  top:0;
  left:0;
  transform: scale(0);
}

.home2.zoom {
  transform: scale(1);
}

1. .home2 addClass zoom it begin zoom in
2. 删除类zoom它开始zoom out