Проблема: если 3 li
стоят в ряд через float
, и ширина первого плавно уменьшается до нуля, используя анимацию через transform
, почему 2-й li
не прилипает в процессе анимации?
.anim_test ul li{
float: left;
width: 100px;
height: 100px;
margin-left: 2px;
margin-right: 2px;
background: gray;
list-style: none;
}
.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);
}
to {
-webkit-transform: scaleX(0);
}
}
<div class="anim_test">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>