Question

我正试图将一些冰块放入杯中。动画应该下降，在下降时旋转，击中div的底部，然后稍微反弹回来然后回到div的底部。目前，一切正常，除了我的img旋转在动画后重置。即使坠落和旋转都是同一动画的一部分，动画的下降部分也不会重置。

@-webkit-keyframes ice_1 {
    45% { -webkit-transform: translateY(920px) rotate(180deg) ;} 
    50% { -webkit-transform: translateY(900px) ;} 
    100% { -webkit-transform: translateY(920px);} 
}


img[src="images/cube.png"] {
    -webkit-animation: ice_1 5s linear 1 forwards;
}

Answer 1

这种情况正在发生，因为transform速记正在第二帧和第三帧将rotate()函数重置为0。您必须为整个动画明确包含rotate(180deg)：

@-webkit-keyframes ice_1 {
    45% { -webkit-transform: translateY(920px) rotate(180deg); } 
    50% { -webkit-transform: translateY(900px) rotate(180deg); } 
    100% { -webkit-transform: translateY(920px) rotate(180deg); } 
}

我的CSS动画的一部分是重置。我不想要它

1 个答案: