我正在尝试使用 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 秒!)
最佳答案
我已经阅读了一些关于过渡的内容,主要结论是,您应该避免过渡宽度/高度、左/右/顶部/底部,而是使用变换属性。
这些答案可能对您有帮助:
Why transitions for some CSS properties are slow and none fluent
How to smoothly animate height in CSS or Javascript on mobile devices
关于html - 滞后的 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37432531/