angular animation new element from input to destination - css

Question

I've got a problem with one animation in angular. I want to make newly created element to 'travel' from input where it was created to destination.
I think it is connected with changing css position attribute while animation from absolute to relative, but don't know why it doesn't work.
Here is my code:
part of index.html:
<form ng-submit="add(name)">
<input type="text" id="input-element" class="form-control" ng-model="name" />
<button type="button" class="btn btn-default">Add</button>
</form>
<ul>
<li class="animation" ng-repeat="item in list"><b>{{item}}</b></li>
</ul>
css:
.animation.ng-enter {
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.animation.ng-enter {
left: 25px;
top: 25px;
opacity: 0;
position: absolute;
}
.animation.ng-enter.ng-enter-active {
position: relative;
left: 0;
top: 0;
opacity: 1;
}
controller's body (not connected with my problem):
$scope.list = [];
$scope.add = function(name) {
$scope.list.push(name);
};
When I remove position: relative from .animation.ng-enter.ng-enter-active, it is always as absolute. When I leave it, position is always relative.
How to make such 'travel' animation from input to destination with angular-animate?
Here is my plunker: http://plnkr.co/edit/m1xoP6GpJJZzhFhjALRd?p=preview.