css3 keyframes 取消动画,为什么我的CSS3动画使用@keyframes在每个百分比范围内停止几毫秒？...

我想制作一个帆船动画。它有效，但它不是一个流畅的动画。它停止在我在@keyframes中做出的每个更改中。我正在使用transform:rotate(-5deg)，然后更改为5deg以模拟波浪效果，同时我使其移动更改“左”值，但结果非常糟糕。我错过了哪些css代码让我的动画顺畅运行？为什么我的CSS3动画使用@keyframes在每个百分比范围内停止几毫秒？

这里是代码：

div {

width: 150px;

height: 150px;

top: 20px;

background-image: url('https://s-media-cache-ak0.pinimg.com/originals/c2/bb/ae/c2bbaed0207deef5775af9c01e1b31ba.jpg');

position: relative;

background-size: cover;

animation: mymove 5s linear infinite alternate;

transform: rotate(0deg);

transform:translate3d

transition: all;

}

@-webkit-keyframes mymove {

from,

20% {

trans: -2%;

transform: rotate(5deg)

}

20%,

30% {

left: 20%;

transform: rotate(-5deg)

}

40%,

50% {

left: 40%;

transform: rotate(5deg)

}

60%,

70% {

left: 60%;

transform: rotate(-5deg)

}

80%,

90% {

left: 80%;

transform: rotate(5deg)

}

90%,

100% {

left: 100%;

transform: rotate(-5deg)

}

}

+1

删除代码如20％，并保持20％{} –

+2

你有一个20％然后又一个20％和30％。尽量保持百分比分开。 –

+0

谢谢你的回复！我改变了由逗号分隔的2个百分比，并且每次更改仅使用1个百分比进行动画更改。现在它移动顺利.. –