html - Animating centered inline block elements -

is there way how animate centered inline block elements using pure css? i'am trying animate alignment of <li> elements inside of <ul> when adding (or removing) list items. have @ jsfiddle, when new item added, other previous items jumps left remain center-aligned. wish animate jump smooth.

div.wrap {   width: 330px;   text-align: center; }  ul#list {   margin: 0; }  ul#list > li {   display: inline-block;   width: 50px;   height: 50px;   border: 3px solid blue;   list-style-type: none; } 

thanks in advance :)

i think newitem can animated in (or olditem can animated out) using css animation property of little bit of javascript (yes, still need it).

but animating re-adjustment of other items, based on of scenarios mentioned above, bit complicated.

anyway, take @ this fiddle demonstration.

snippet:

function additem(list, newitem) {      newitem.insertadjacenthtml('beforeend', 'x');      list.appendchild(newitem);      newitem.classlist.add('animatein');  }    function removeitem(list){      var olditem = null;      if (list.childnodes.length > 0){          olditem = list.childnodes[list.childnodes.length - 1];          olditem.classlist.remove('animatein');          olditem.classlist.add('animateout');          olditem.addeventlistener('animationend', function(){              list.removechild(olditem);          });      }  }    var list = document.getelementbyid('list');  var newitem = document.createelement('li');    var button = document.getelementbyid('add');  var removebutton = document.getelementbyid('remove');  button.addeventlistener('click', function () {      additem(list, newitem.clonenode());  });  removebutton.addeventlistener('click', function(){      removeitem(list);  });

div.wrap {      width: 330px;      text-align: center;  }  ul#list {      margin: 0;  }  ul#list > li {      position: relative;      display: inline-block;      width: 50px;      height: 50px;      border: 3px solid blue;      list-style-type: none;  }    .animatein { animation: .4s fadein; }  .animateout { animation: .4s fadeout; }    @keyframes fadein {      { opacity: 0; left: 100px; }      { opacity: 1; left: 0px; }  }    @keyframes fadeout {      { opacity: 1; left: 0px; }      { opacity: 0; left: 100px; }  }

<div class="wrap">      <ul id="list"></ul>  </div>  <button id="add">add</button>  <button id="remove">remove</button>

is looking for? hope helps in way.