html <marquee>样式CSS动画中的错误

Question

mclapply returns NULL randomly一个简单的css动画，我正在努力工作。代码也如下：

// this selects an element with CSS class "inner-html"
const element = <HTMLElement>document.querySelector('.inner-html');
element.innerHTML = element.innerHTML.replace(...);

.navscroll {
  width: 100%;
  height: 100px;
  padding: 5px;
  overflow: hidden;
  position: relative;
  background-color: red;
}

.navscroll div {
  position: relative;
  width: 200px;
  height: 100%;
  line-height: 50px;
  text-align: center;
  background-color: blue;
  opacity: 1;
  border-radius: 5px;
  transform: translateX(100%);
  animation: navscroll 15s linear infinite;
}

@keyframes navscroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

它应该是div的滚动导航栏，但我有两个问题：

• 内部div垂直堆叠，而不是水平堆叠......
• 内部div只滚动导航栏/外部div的一小部分......

理想情况下，如果navscroll div中有很多div，则只有5-6个div会在屏幕上随时显示，尽管导航栏总是会滚动，而其他div最终会进入屏幕。 （类似于电视屏幕顶部的股票代码）。感谢任何帮助，谢谢!!

Answer 1

div is a block level element (means it has display: block; by default). These create a line break before and after themselves. Use display: inline-block; and make sure they align properly using vertical-align: middle;.

2nd problem: translateX(100%) here the percentage does not refer to the parent element, but to the div being animated.

.navscroll {
  width: 100%;
  height: 100px;
  padding: 5px;
  overflow: hidden;
  position: relative;
  background-color: red;
  white-space: nowrap;
}

.navscroll div {
  position: relative;
  width: 200px;
  height: 100%;
  line-height: 50px;
  text-align: center;
  background-color: blue;
  opacity: 1;
  border-radius: 5px;
  transform: translateX(100%);
  animation: navscroll 15s linear infinite;
  /* this does the magic: */
  display: inline-block;
  vertical-align: middle;
}

@keyframes navscroll {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}

<div class="navscroll">
  <div>Why arent these</div>
  <div>Side by side</div>
  <div>or sliding across the WHOLE navbar</div>
</div>

As per your question about how to create a snippet here:

Answer 2

The inner divs are stacking vertically because the default styling for a div is display: block. Adding the styles display: inline-block; vertical-align: top; to your .navscroll div rules will set them side by side, aligned to their top edges.

The animation is starting in the middle, and not all the way to the right like you intend because of how transform: translate() works. transform refers to the object being transformed, not its parent. So, translating something 100% of it refers to the width of the object. Try animating the position, something like this instead:

@keyframes navscroll {
  0% {
    left: 100%;
  }
  100% {
    left: -600px;
  }
}

EDIT: Also, remove the initial transform: translateX(100%); and you can simply animate the left position to -600px (3x the width of the each block).