我想制作一个帆船动画。它有效，但它不是一个流畅的动画。它停止在我在@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个百分比进行动画更改。现在它移动顺利.. –