Trouble understanding CSS animations - css

Question

I am trying to wrap my head around the CSS animation property. In my current code, I have basically this structure:
<div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
The li's inside are generated via JS, and what I'd like to do is animate the expansion so it's not as abrupt. I attached
animation: 1s linear;
to the outermost div, but it doesn't animate. What I'm trying to do is as the li's are added/removed, the height of the wrapper should animate instead of simply change. I've been looking through various docs and sites, but I can't figure out if I don't understand the property or if I'm using it wrong.

Answer 1

First of all, it's good to know the difference between transition and animation in CSS, and when to use each.
transition is used when you want to animate changes to either specific properties (transition: opacity .5s, color .5s), or all properties (transition: all .5s) as they are altered. This way, if you change a property like opacity via - for example - a CSS hover state, or JavaScript, that change will animate.
animation is used to set a keyframe animation to an element, where you predefine a sequence of steps that can affect one or more properties of that element.
The type of animation you're requesting - simply animating an element in/out as it is added or removed from the DOM - does not exist in CSS alone. However, many JavaScript libraries can intelligently add/remove CSS classes while an element is added/removed, allowing CSS animations to carry out.
With that said, there is a way we could decently animate in <li> elements with CSS alone, by having them start with a keyframe animation.
Here's a live demo where I'm doing just that by animating each new <li>'s height from 0 to 2em (which I've specified as the line-height). Note that width and height can only transition to a specified value - not auto.
$('button').on('click', function() {
$('ul').append('<li>List Item</li>');
});
div {
border: 1px solid teal;
border-radius: 4px;
padding: 1em;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
animation: grow 1s;
line-height: 2em;
overflow-y: hidden;
}
#keyframes grow {
0% {
height: 0;
}
100% {
height: 2em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>List Item</li>
</ul>
<button>Add to List</button>
</div>