I've made an animation with CSS (transform) and it resets when the animation ends

Question

I have the following structure, and my problem is that when the animaition ends that is replacing down it just restart, and I was wondering if there\'s anyway it just stops nad

Answer 1

This has nothing to do with transitions/animations:

CSS Transforms Module Level 1

A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.

Changing the display of the list items from inline to inline-block should fix this.

Updated Example

It seems like there are some inconsistencies across browsers. The behavior you are seeing (where the transition resets) occurs in Chrome/IE11.

FireFox, on the other hand, won't even transition the element at all since it is a non-replacing inline level element.

.list li {
    display: inline-block;
    font-family: MyFont;
    color:white;
    font-size:26px;
    padding:20px;
    -webkit-transition:all 1s ease 0s;
    transition:all 1s ease 0s;
    border: 1px solid transparent;
}