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

我正在尝试制作帆船动画。它可以工作，但不是平滑的动画。它会在我对@keyframes所做的每一次更改中停止。我正在使用transform:rotate-5deg，然后它变为5deg来模拟波浪效果，同时我让它移动，改变左边的值，但是结果很糟糕。我缺少哪一段css代码来让我的动画柔和流畅地运行

以下是代码：

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)
  }
}

---

当您添加20%、30%{…}、40%、50%{…}等2%的值时，在这2个步骤/值之间应用的规则将是相同的，因此它会停止几毫秒

如果要删除百分比值中的一个，并且还可以删除除第一个和最后一个之外的所有值中的左侧，则会获得平滑动画

div{ 宽度：150px； 高度：150像素； 顶部：20px； 背景图片：url'https://s-media-cache-ak0.pinimg.com/originals/c2/bb/ae/c2bbaed0207deef5775af9c01e1b31ba.jpg'; 位置：相对位置； 背景尺寸：封面； 动画：mymove 5s线性无限交替； 变换：旋转0度； 转换：translate3d 过渡：全部； } @-webkit关键帧mymove{ 从…起 0% { 左：-150px； 变换：旋转5度 } 20% { 变换：旋转-5度 } 40% { 变换：旋转5度 } 60% { 变换：旋转-5度 } 80% { 变换：旋转5度 } 100% { 左：100%； 变换：旋转-5度 } }

---

删除像20%这样的代码并保留20%{}一个代码占20%，另一个代码占20%和30%。尽量把百分比分开。谢谢你的回复！我更改了以逗号分隔的2个百分比，并且每次更改仅使用1个百分比来更改动画。。！现在进展顺利了……谢谢！那真的很有帮助@JulioRodriguez Great……也请考虑接受它。