Laggy CSS-Animation

Question

Ich versuche, einige Container auf meiner Website mit CSS3-Animation zu sortieren.

Das ist mein Container:

.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>

Grundsätzlich ist die Animation funktioniert recht gut, aber es ist eine seltsame nacheilenden am Anfang. Erstens wird der Behälter stärker ruckartig bewegt. Nach einem Moment geht die Animation sehr flüssig.

Check it out over here! (5 Sekunden warten!)

Answer 1

die maximale Höhe verringern, um besser die Animation zu sehen.

.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>

Answer 2

ich über Übergänge gelesen haben ist ein wenig und die wichtigste Schlussfolgerung, dass, sollten Sie den Übergang Breite/Höhe, links/rechts/oben/unten vermeiden und stattdessen die Eigenschaft Transformation verwenden.

Diese Antworten können Ihnen helfen:

Why transitions for some CSS properties are slow and none fluent

How to smoothly animate height in CSS or Javascript on mobile devices