html - 关键帧动画 : slide then rotate

Question

我试图在一些文本中滑动并创建一个“弹跳效果”，就好像它在撞墙一样，然后再固定到一个位置。

但是，每当我添加旋转时，它会在移动的同时旋转，而不是在达到某个点后旋转。

总而言之 - 我希望 div 在达到 -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% 时明确指定 0 度，然后在 5 度之后，然后在稍后的某个点再次指定 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;
}

请注意，我指定了“right: -30px;”三次。否则动画将移动到您的下一个指定值并开始执行该动画，即正 20px。