Laggy CSS animation
19,009
Solution 1
Decrease the max height to better see the animation.
.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>
Solution 2
I have read about transitions a bit and the main conclusion is that, you should avoid transitioning width/height, left/right/top/bottom and instead use the transform property.
These answers might help you:
Why transitions for some CSS properties are slow and none fluent
How to smoothly animate height in CSS or Javascript on mobile devices
Author by
susanloek
Updated on June 04, 2022Comments
-
susanloek almost 2 years
I'm trying to size up some container on my site using CSS3-animation.
This is my 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>
Basically the animation works quite fine but there is a strange lagging at the beginning. Firstly the container gets higher juddering. After a moment the animation goes on very smooth.
Check it out over here! (Wait 5 Seconds!)