如何使用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;
}

目前它只适用于放大和缩小 请帮我这样做.. !!感谢提前.. !!

Answer 1

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

也许你需要这个？

添加，使用transfrom＆amp; transition

.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它开始zoom in
2. 从zoom
开始删除课程zoom out