Question

我正试图在某些文字中滑行并创建一个“反弹效果”＆＃39;好像它正在撞墙，然后才安顿下来。

然而，每当我添加旋转时，它会旋转WHILST移动，而不是一旦它到达某个点。

总结 - 我希望div旋转ONCE它命中-30px，然后返回到不旋转，然后移动另一个方向，然后再安装到位。

这是我目前的CSS ...

@-webkit-keyframes slide {
from {right: 1500px ; -webkit-transform: rotate(0deg)} 
50% {right: -30px, ; -webkit-transform:rotate(5deg)} 
75% { right: 20px} 
to {right: 0px}
}

div {
-webkit-animation: slide 5s;
}

Answer 1

从一个点到另一个点，动画逐渐实现。如果您希望它以50％开始，则需要在50％和5度之后明确指定0度，然后在以后再次指定0度。这应该是你想要的：

@-webkit-keyframes slide {
0% {right: 1500px;} 
50% {right: -30px; -webkit-transform:rotate(0deg)} 
55% {right: -30px; -webkit-transform:rotate(5deg)}
65% {right: -30px; -webkit-transform:rotate(0deg)}
75% { right: 20px} 
100% {right: 0px}
}

div {
-webkit-animation: slide 5s;
}

请注意，我指定“正确：-30px;”三次。否则，动画将移动到您的下一个指定值并开始实现该动画，这是正20px。

关键帧动画：滑动然后旋转

1 个答案: