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

Question

I am trying to slide in some text and create a 'bounce effect' as if it is hitting a wall, before settling in a position.

However, whenever I add rotation, it rotates WHILST moving, not once it has reached a certain point.

In summary - I want the div to rotate ONCE it hits -30px, then go back to no rotate, then move the other way, before settling in place.

Here is my current 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

going from one point to another, the animation is implemented gradually. If you want it to start at 50%, you need to explicitly specify 0 degrees at 50%, and 5 degrees later, then again 0 degrees at a later point. THis should be what you are looking for:

@-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;
}

Note that i specified "right: -30px;" three times. Otherwise the animation would move on to your next specified value and start implementing that animation, which is positive 20px.