遅いCSSアニメーション

私はCSS3アニメーションを使用して私のサイトにいくつかのコンテナをサイズアップしようとしています。遅いCSSアニメーション

これは私のコンテナです：

.new-place-wrapper { 
 
    background: #004682; 
 
    display: inline-block; 
 
    margin-top: 70px; 
 
    animation-name: newplace; 
 
    animation-duration: 1s; 
 
    animation-fill-mode: forwards; 
 
    animation-delay: 3s; 
 
    animation-timing-function: linear; 
 
    max-height: 0px; 
 
    padding: 0px 20px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    z-index: 8888; 
 
} 
 

 
@keyframes newplace { 
 
    0% { 
 
    max-height: 0px; 
 
    padding: 0px 20px; 
 
    } 
 
    100% { 
 
    max-height: 9999px; 
 
    padding: 20px 20px; 
 
    } 
 
}

<div class="new-place-wrapper" data-equalizer> 
 
    <div class="new-place-close"><i class="fa fa-times"></i></div> 
 
    <div class="inner-place-left" data-equalizer-watch> 
 
    <span>Wir sind umgezogen!</span> 
 
    Ab sofort finden Sie uns hier: 
 
    <address> 
 
     <strong>Company</strong><br> 
 
     STREET 123<br> 
 
     CITY<br><br> 
 
     PHONE 
 
    </address> 
 
    </div> 
 
    <div class="inner-place-right" data-equalizer-watch> 
 
    <a class="button radius" href="#">VCF-Karte</a> 
 
    </div> 
 
</div>

基本的なアニメーションはかなりうまく動作しますが、先頭の奇妙な遅れがあります。まず、コンテナのジャダーが高くなります。しばらくすると、アニメーションは非常に滑らかになります。

Check it out over here!（5秒待つ！）

出典

2016-05-25 susanloek

私は問題を見ることができないと思います。それはスニペットで起こっていますか？ –

[CSSプロパティの遷移が遅く、流暢でない理由]の重複の可能性があります（http://stackoverflow.com/questions/12347701/why-transitions-for-some-css-properties-are-slow-and-none-流暢） –

優れたアニメーションを見ることが最大の高さを下げます。

.new-place-wrapper { 
 
    background: #004682; 
 
    display: inline-block; 
 
    margin-top: 70px; 
 
    animation-name: newplace; 
 
    animation-duration: 1s; 
 
    animation-fill-mode: forwards; 
 
    animation-delay: 3s; 
 
    animation-timing-function: linear; 
 
    max-height: 0px; 
 
    padding: 0 20px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    z-index: 8888; 
 
} 
 

 
@keyframes newplace { 
 
    0% { 
 
    max-height: 0px; 
 
    } 
 
    100% { 
 
    max-height: 309px; 
 
    padding-top: 20px; 
 
    padding-bottom:20px; 
 
    } 
 
}

<div class="new-place-wrapper" data-equalizer> 
 
    <div class="new-place-close"><i class="fa fa-times"></i></div> 
 
    <div class="inner-place-left" data-equalizer-watch> 
 
    <span>Wir sind umgezogen!</span> 
 
    Ab sofort finden Sie uns hier: 
 
    <address> 
 
     <strong>Company</strong><br> 
 
     STREET 123<br> 
 
     CITY<br><br> 
 
     PHONE 
 
    </address> 
 
    </div> 
 
    <div class="inner-place-right" data-equalizer-watch> 
 
    <a class="button radius" href="#">VCF-Karte</a> 
 
    </div> 
 
</div>

出典

2016-05-25 09:41:51