Animation with display flex creating problem in ion item


When I open the item-accordion I have used the animation .But the item-accordion has the image that is wrap in the multiple row using display flex property of the CSS3. Whenever I open the accordion the extra content is displayed on the right during transition.So can anyone suggest what can be done to solve it?And this happens when width of the content is small

Another problem is i have used the animate-repeat animation to delete the item.But when i open the item-accordion the animation is applied to them also hence animating the image as a list.


list .item-accordion {
  -webkit-transition:0.09s all linear ;
  transition: 0.09s all linear;

This is the animation I am using.

The demo of the code is over here: