我试图以一个'摇摆'运动的元素动画，就好像它是一条船在波浪上.
JSBIN这里:https://jsbin.com/bakugifulo/edit?html,css,output
我在JSBIN中有四个彩色的例子.
(1)Pink =这是我所追求的动议.非常平稳的摇摆与放松.动画关键帧:
@keyframes rocking1 {
0% {
transform: rotate(-5deg);
animation-timing-function: ease-in-out;
}
50% {
transform: rotate(5deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotate(-5deg);
animation-timing-function: ease-in-out;
}
}
(2)Blue = The catch:由于这个动画是如何被纳入到更大的图片，我需要它做同样的事情，但不是开始旋转.意思是，我希望它从'0'旋转开始.
从理论上讲，移动关键帧%的斑点和调整缓动应该会产生相同的结果:
@keyframes rocking2 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-5deg);
animation-timing-function: ease-out;
}
75% {
transform: rotate(5deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotate(0deg);
animation-timing-function: ease-in;
}
}
请注意，当动画从100%循环回到0%时，会有非常轻微的停顿.这就是我正在努力防止的.
(3 4)Brown Green =上述两个的重复，但使用线性而不是 slack .&&注意，绿色的没有暂停.
所以，问题似乎是我在蓝色div中的宽松逻辑.但是，我想不明白.我试过各种洗牌和交换放松选项.完全go 掉0%和100%的标记.它们都会产生同样的问题...循环的时候会有一个非常轻微的停顿
有没有办法在不停顿的情况下实现我想要的东西？或者这只是使用缓动时不可避免的(我猜第一个例子is暂停，但你只是没有注意到，因为它在它移动的方向的末尾暂停).
但我希望我只是错过了一些显而易见的东西在我的放松逻辑.