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