CODEWITHSUNDEEP
jquerycsscss-animationskeyframe
Nicholas Hazel
Nicholas Hazel

Reputation: 3750

CSS3 Animation - Keyframe To For Dynamic Content

I've looked around a bit on how CSS3 does not currently support a height: auto value for keyframe animations.

One of the tricks seems to be using max-height as a value to sort of hack it to work.

I'm trying to do the opposite. I want my header wrapper to shrink and have the navigation slide up under it where it belongs.

I have a simple mockup ready if somebody could show me any tricks of how to set up inherit or auto while avoiding javascript.

CSS3 Playground (Static height)

https://jsfiddle.net/z3ytveu5/3/

@keyframes logoWrapDrop {
  from {
    height: 500px;
  }
  to {
    height: 200px;
  }
}
* {
  margin: 0;
  padding: 0;
}
#logoWrap {
  background: #69C;
}
#logoWrap.animating {
  animation-name: logoWrapDrop;
  animation-duration: 4s;
}
#navigation li {
  list-style-type: none;
  float: left;
  background: #CCC;
  padding: 1em;
  margin: 0 1em;
}
<div id="logoWrap" class="animating">
  <h1>Responsive Content - Dynamic Height</h1>
  <p>
    How to avoid static keyframe "to" px?
  </p>
</div>
<div id="navigation">
  <ul class="nav">
    <li>Nav 1</li>
    <li>Nav 2</li>
  </ul>
</div>

Am I going to have to use JavaScript/jQuery to achieve this? Or is there a CSS3 only workaround to define the automatic height of my wrapper?

Working with JS (Dynamic height):

https://jsfiddle.net/z3ytveu5/2/

$(function() {
  var h = $('#logoWrap').height();
  $.keyframe.define({
    name: 'logoWrapDrop',
    from: {
      'height': '500px'
    },
    to: {
      'height': h + 'px'
    }
  });
  $('#logoWrap').addClass('animating');
});
* {
  margin: 0;
  padding: 0;
}
#logoWrap {
  background: #69C;
}
#logoWrap.animating {
  animation-name: logoWrapDrop;
  animation-duration: 4s;
}
#navigation li {
  list-style-type: none;
  float: left;
  background: #CCC;
  padding: 1em;
  margin: 0 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquerykeyframes/0.0.9/jquery.keyframes.min.js"></script>
<div id="logoWrap">
  <h1>Responsive Content - Dynamic Height</h1>
  <p>
    How to avoid static keyframe "to" px?
  </p>
</div>
<div id="navigation">
  <ul class="nav">
    <li>Nav 1</li>
    <li>Nav 2</li>
  </ul>
</div>

Upvotes: 1

Views: 478

Answers (1)

Harry
Harry

Reputation: 89750

You can actually use the opposite of max-height which is the min-height. Initially set min-height to some arbitrary large value and then animate it to 0px. Since the height is set as auto, it will not shrink beyond what is necessary to show the content.

@keyframes logoWrapDrop {
  from {
    min-height: 500px;
  }
  to {
    min-height: 0px;
  }
}
* {
  margin: 0;
  padding: 0;
}
#logoWrap {
  background: #69C;
}
#logoWrap.animating {
  animation-name: logoWrapDrop;
  animation-duration: 4s;
}
#navigation li {
  list-style-type: none;
  float: left;
  background: #CCC;
  padding: 1em;
  margin: 0 1em;
}
<div id="logoWrap" class="animating">
  <h1>Responsive Content - Dynamic Height</h1>
  <p>
    How to avoid static keyframe "to" px?
    <br>How to avoid static keyframe "to" px?
    <br>How to avoid static keyframe "to" px?
  </p>
</div>
<div id="navigation">
  <ul class="nav">
    <li>Nav 1</li>
    <li>Nav 2</li>
  </ul>
</div>

Snippet with lesser content:

@keyframes logoWrapDrop {
  from {
    min-height: 500px;
  }
  to {
    min-height: 0px;
  }
}
* {
  margin: 0;
  padding: 0;
}
#logoWrap {
  background: #69C;
}
#logoWrap.animating {
  animation-name: logoWrapDrop;
  animation-duration: 4s;
}
#navigation li {
  list-style-type: none;
  float: left;
  background: #CCC;
  padding: 1em;
  margin: 0 1em;
}
<div id="logoWrap" class="animating">
  <h1>Responsive Content - Dynamic Height</h1>
  <p>
    How to avoid static keyframe "to" px?
  </p>
</div>
<div id="navigation">
  <ul class="nav">
    <li>Nav 1</li>
    <li>Nav 2</li>
  </ul>
</div>

Upvotes: 1

Related Questions