代码之家 › 专栏 › 技术社区 › Dan

如何流畅地制作CSS动画,结尾不间断

css-animations css html

Dan · 技术社区 · 5 年前

下面的代码运行时,您可以看到它在几秒钟结束后中断动画,运行不顺畅。我想以我定义的宽度连续平滑地运行它。请帮忙,这是 fiddle

.tech-slideshow {
  height: 200px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  height: 200px;
  width: 126px;
  background: url(https://i.stack.imgur.com/IcC0b.png) repeat-x;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 8s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
  opacity: 1;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}

<div class="tech-slideshow">
  <div class="mover-1"></div>
  <div class="mover-2"></div>
</div>

0 回复 | 直到 5 年前

Alex Shink 5 年前

例如,可以设置背景位置的动画,将其向左移动图像的宽度,这样当动画结束并再次开始时,实际上看不到差异。在这种情况下,背景图像的宽度是 ,因此,您需要将背景向左滑动到该背景的宽度。一般来说,有很多选择,这都取决于你需要解决什么任务。

@keyframes moveSlideshow {
Â Â  100% {
Â Â Â Â  background-position-x: -26px;
Â Â  }
}

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前