滞后的 CSS 动画答案

【问题标题】：Laggy CSS animation滞后的 CSS 动画
【发布时间】：2016-09-22 18:51:56
【问题描述】：

我正在尝试使用 CSS3-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: 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 秒！）

【问题讨论】：

我认为我看不到问题所在。它发生在 sn-p 中吗？
Why transitions for some CSS properties are slow and none fluent的可能重复

标签： html css animation css-animations

【解决方案1】：

降低最大高度以更好地查看动画。

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

【讨论】：

【解决方案2】：

我已经阅读了一些关于转换的内容，主要结论是，您应该避免转换宽度/高度、左/右/上/下，而是使用转换属性。

这些答案可能对您有所帮助：

Why transitions for some CSS properties are slow and none fluent

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

【讨论】：