OnLoadバナーズームアウト

Question

私はzoom-outアニメーションをWikipediaアプリのように、ページの読み込み中の画像に再作成しようとしています。私はそれをホバリングでそう働いている、イメージは優しくズームアウトするが、私はそれを独立して発射機能にどのように動作させるか分からない。私は新しいスケールのクラスを追加したjquery関数を作成しようとしましたが、うまくいかないようです。

誰でも手助けできますか？

//Function I attempted to Use 
 

 
$(function() { 
 
$('.photo').addClass('shrink') 
 
});

.photo { 
 
\t height: 350px; 
 
\t widthL 350px; 
 
\t border: 1px solid; 
 
\t overflow:hidden; 
 
} 
 

 
.photo img { 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t transition: all .5s; 
 
\t transform: scale(1.2); 
 
} 
 

 
.photo:hover img { 
 
\t transform: scale(1); 
 
} 
 

 
/* 
 
.shrink { 
 
    transform: scale(1) 
 
} 
 

 
*/

<div class="photo"> 
 
\t <img src="https://i.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg" alt=""> 
 
</div>

Answer 1

単純なトランジションではなく、アニメーションを作成する必要があります。あなたがあなたのイメージに変更する必要があります。もちろん、この

@-webkit-keyframes zoom { 
 
    0% {transform: scale(1);} 
 
    100% {transform: scale(0.8); } 
 
} 
 

 
h1 { 
 
    -webkit-animation: zoom 5s 1; 
 
}

<h1>Hey there, I'm using ANIMATION</h1>

よう 何か:)

Answer 2

あなただけ.shrink imgにあなたのCSSで.shrinkを変更（およびそれのコメントを外し、もちろん）する必要がある、あなたはdivのではなく、画像をターゲットにしています。

Here's a fiddle 要素が適切に配置されるようにdocument.ready（）を追加することもできます。