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