本文介绍了滞后的CSS动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用CSS3-动画调整我的网站上的一些容器的大小。
这是我的容器：
.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秒！)
推荐答案
减小最大高度以更好地观看动画。
.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>这篇关于滞后的CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！