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