Question: I have to convert one xml to html page. I read that xml and mapped to transform xml. I have added html formatting tags in xslt. But it is not reflecting in page. I am getting data of xml in one line side by side. The html code not working what i have given. So any one can let me know how to transform xml to html, is there any other solution ?

Answer: 
As already mentioned by Patrick Allen in comments, you cannot animate/transition from or to an "auto" value using CSS. For your case, you could replace it with `transform: translate()` like in the below snippet and achieve the same effect. 

Below is the relevant SCSS code and what it does:

* The `transform: translateY(-100%)` moves the elements content upwards by the exact height of the container element. This would hide the whole container.
* A `top: 39px` is added such that the chevron icon is still shown and only the content is hidden.
* On hover the `transform` is nullified by doing `transform: translateY(0%)`. This puts the element back in its original position.
* But because of the `top: 39px` present in the unhovered state, the position of the container would be offset a bit and that can be nullified by adding `top: 0px` on hover.

```
.hud {
  position: absolute;
  width: 100%;
  text-align: center;
  transition: all 1s;
  top: 39px;
  transform: translateY(-100%);
  &:hover {
     top: 0px;
     transform: translateY(0%);
  }
}

```

```css
body {
  background: #121111;
}
.hud {
  position: absolute;
  color: red;
  width: 100%;
  text-align: center;
  -webkit-transition: all 1s;
  transition: all 1s;
  top: 39px;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}
.hud:hover {
  top: 0px;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
.pull-down {
  color: #e6e6e6;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  height: 24px;
  margin-top: 15px;
  font-size: 1.5em;
}
.pull-down:hover {
  color: #fff;
}
.hud:hover .pull-down {
  color: #fff;
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
```

```html
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="hud">
  <div class="hud-internal">
    <p>foobar</p>
  </div>
  <i class="fa fa-chevron-down pull-down" data-hud-toggle></i>
</div>
```
```
$('#click').click(function () {

    var windowHeight = $(window).height();
    var lineHeight = $('#line').height();
    var desiredBottom = 100;

    var newPosition = windowHeight - (lineHeight + desiredBottom);

    $('#line').animate({top:newPosition},1000,function () {
        $('#line').css({
            bottom: desiredBottom,
            bottom: 'auto'
        });
    });

});

```

Here [jsfiddle](http://jsfiddle.net/gxkuS/487/)