Question

我正在尝试做一个简单的动画，但结果不顺畅。

.animate {
    animation: infinity 1.5s steps(27) forwards;
}

@keyframes infinity {
    100% {
        background-position: -5778px;
    }
}

<div class="animate" style="width:214px; height:32px; background-image:url(https://i.hizliresim.com/gOggGZ.png); background-repeat: no-repeat;"></div>

那么有什么办法可以消除这种震动吗？

Answer 1

我们无法看到该片段，请修复它以便我们可以提供更好的帮助。

另一方面，如果动画不流畅，过渡可能会有所帮助。您无法提供步骤数量＆＃39;步骤（3）＆＃39;，有CSS属性

animation-iteration-count：3;

确定完成一个完整循环后应重复的次数。你可以使用＆＃39;无限＆＃39;太

此外，您还应该定义0％以更好地控制所需的元素动画。

＆＃13;

.animate {
    animation: infinity 1.5s linear forwards; /*add transition here */
    animation-iteration-count: 3;
}

/* or on the element itself */
.elementclassname {
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

@keyframes infinity {
    0% {
        background-position: 0px;
    }
    100% {
        background-position: -300px;
    }
}

＆＃13;

Answer 2

将animation-timing-function更改为ease-in-out可获得流畅的动画效果。

.animate {
  animation: infinity 1.5s ease-in-out forwards;
 }
 @keyframes infinity {
  0% {
        background-position: 0px;
    }
  100% {
	background-position: -300px;
	}
 }

<div class="animate" style="width:200px; height:100px; background-image:url(https://preview.ibb.co/k2cREc/banner_about.jpg); background-repeat: no-repeat;    -webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-o-transform: rotate(-8deg);-ms-transform: rotate(-8deg); transform: rotate(-8deg);"></div>

Answer 3

你明确要求CSS制作一个包含3个步骤的动画，这就是你的动画不流畅的原因。

只需删除steps(3)部分就可以了！

.animate {
  animation: infinity 1.5s forwards;
  width: 100px;
  height: 50px;
  background: url('https://i.imgur.com/M5XHVHu.jpg');
  background-repeat: no-repeat;
  transform: rotate(-8deg);
}

@keyframes infinity {
  100% {
    background-position: -300px;
  }
}

<div class="animate"></div>

CSS步骤动画摇动图像

3 个答案: