Good day.

Problem: if 3 li stand in a row through float, and the width of the first smoothly decreases to zero, using animation through transform, why doesn’t 2nd li stick during animation?

Code and example of work: http://codepen.io/anon/pen/lLpeo

    2 answers 2

    I think there is a feature in -webkit-transform: scale

    Try to do something like this:

    @-webkit-keyframes 'movement'{ from { width:100px; } to { width:0px; } }

    - = - = - = - = - = - = - = - If it is important to use transformation, then:

     .anim_test ul li{ float: left; width: 100px; height: 100px; margin-left: 2px; margin-right: 2px; background: gray; list-style: none; border: 1px solid red; -webkit-animation-name: 'people-go'; -webkit-animation-duration: 1s; animation-name: 'people-go'; animation-duration: 1s; } .anim_test ul li:first-child{ -webkit-animation-name: 'movement'; -webkit-animation-duration: 1s; animation-name: 'movement'; animation-duration: 1s; } @-webkit-keyframes 'movement'{ from { -webkit-transform: scaleX(1); } to { -webkit-transform: scaleX(0); } } @-webkit-keyframes 'people-go'{ from { -webkit-transform: translateX(0px); } to { -webkit-transform: translateX(-50px); } }

    add another animation.

    • so will work. but I have a requirement - to make it exactly through transform - olegall
    • okay see my update. Add another animation. - silksofthesoul
    • Your option does not work, and you need to reduce the width within the scope of the task - olegall
    • how does not work? ... just launched - it works. the width of the first element decreases, and others go to it. is it possible or not to use width as part of your task? ... in any case, there is a solution with both width and scaleX. - silksofthesoul
    • Sorry, it works, thanks! Is it possible somehow without animation people-go, only with movement? Very cumbersome. It is not clear why in the example codepen.io/anon/pen/lLpeo li do not stick. It should stick by logic. The width changes, the element remains float. - olegall

    This is a feature of the work transform: scale (). The element is resized in size only visually, reserving a place in the flow of elements as it was before the transformation. In the same way as changing the positioning of elements with position:relative , it visually moves, but actually stays in the same place, leaving empty space there. If you need to do it through transform and get away with only one animation, you can do it as follows:

     .anim_test ul li{ float: left; padding: 0 2px; list-style: none; } .square { width: 100px; height: 100px; background: gray; } .anim_test ul li:first-child{ -webkit-animation-name: 'movement'; -webkit-animation-duration: 5s; animation-name: 'movement'; animation-duration: 5s; } @-webkit-keyframes 'movement'{ from { -webkit-transform: scaleX(1); margin-right: 0; } to { -webkit-transform: scaleX(0); margin-right: -50px; } } 
     <div class="anim_test"> <ul> <li> <div class="square"></div> </li> <li> <div class="square"></div> </li> <li> <div class="square"></div> </li> </ul> </div>