我想使用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>
基本上动画效果还不错,但是一开始有些奇怪的延迟。首先容器会抖动变高。一段时间后,动画就会非常流畅。
点击这里查看!(等待5秒!)