Laggy CSS animation

Question

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!)

I think that I can't see the problem. Is it happening in the snippet? — Mosh Feu, May 25 '16 at 09:27
Possible duplicate of [Why transitions for some CSS properties are slow and none fluent](http://stackoverflow.com/questions/12347701/why-transitions-for-some-css-properties-are-slow-and-none-fluent) — noa-dev, May 25 '16 at 09:50

score 15 · Answer 1 · edited May 23 '17 at 11:52

15

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

edited May 23 '17 at 11:52

Community

1
1

answered May 25 '16 at 09:49

noa-dev

3,561
9
34
72

score 3 · Accepted Answer · answered May 25 '16 at 09:41

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>

Laggy CSS animation

2 Answers2

Linked