アニメーションdiv大きく、小さくjqueryで直ぐ

Question

jQueryアニメーションでdivを大きくアニメーション化したいです。私はこのコードを書いた：

$(this).animate({ 
    opacity: 0, 
    top: "-=100", 
    width: "38px", 
    height: "32px" 
}, 1500, function() { 
    $this.remove() 
}) 

このコードでは、大きなdivは小さくならない。このコードを最初に編集してdivを大きくしてからすぐに小さくする方法はありますか？ CSS3でこの仕事をすることができれば、CSS3でそれを手伝ってください。

ありがとうございます。

Answer 1

CSS3アニメーションで

とtransform: scale();あなたはそれを行うことができます：これは役立つかもしれない

@-webkit-keyframes grow 
{ 
    0%{-webkit-transform:scale(1);} 
    50%{-webkit-transform:scale(2);} 
    100%{-webkit-transform:scale(1);} 
} 
@-moz-keyframes grow 
{ 
    0%{-moz-transform:scale(1);} 
    50%{-moz-transform:scale(2);} 
    100%{-moz-transform:scale(1);} 
} 
@-ms-keyframes grow 
{ 
    0%{-ms-transform:scale(1);} 
    50%{-ms-transform:scale(2);} 
    100%{-ms-transform:scale(1);} 
} 
#spin{ 
    position:absolute; 
    top:10%; 
    left:10%; 
    -webkit-animation-name: grow; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: grow; 
    -moz-animation-duration: 3s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-animation-name: grow; 
    -ms-animation-duration: 3s; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 
} 

See this fiddle