时间戳

首页 > 解决方案 > CSS动画不够流畅

html - CSS动画不够流畅

问题描述

动画从左到右线性移动，但在动画时间结束后突然开始。尝试减少到​​ 1 秒并将时间增加到 15 秒。甚至增加了关键帧但仍然不起作用。请帮忙：

.grid-item-2 {
  grid-column: 1 / span 2;
  grid-row: 1;
  background-image: url(Building_1.png);
  margin-left: 100px;
  margin-top: 53px;
  width: 90%;
  background-repeat: repeat-x;
  animation: Buildings 2s linear infinite;
}

@keyframes Buildings {
  0% { background-position: 0% 100%; }
  25% { background-position: 25% 75%; }
  50% { background-position: 50% 50%; }
  75% { background-position: 75% 25%; }
  100% { background-position: 100% 0; }
}
<div class="grid-item grid-item-2"></div>

标签： htmlcsscss-animationskeyframe

解决方案

跳跃的问题是您需要使背景图像适应 div 元素的大小，如果您想要一个响应式站点，这可能会很困难。下面的代码是我能想到的最好的代码，我在 -100% 和 200% 之间循环，使图像从元素外部开始，然后在元素的另一侧结束，产生它继续的错觉。老实说，我会repeat-x用 just替换repeat。

我添加了背景颜色只是为了使元素更加可见。

.grid-item-2 {
  grid-column: 1 / span 2;
  grid-row: 1;
  background-image: url("https://picsum.photos/id/737/300/200.jpg");
/*  margin-left: 100px;
  margin-top: 53px; */
  width: 90%;
  background-repeat: repeat-x;
  background-size: 50% 50%;
  animation: Buildings 3s linear infinite;
  
  background-color: #000; /* just to show case the element better */
  height: 90vh;
}

@keyframes Buildings {
  0% { background-position: -100% 200%; }
  100% { background-position: 200% -100%; }
}
<div class="grid-item-2">

</div>

推荐阅读