Question

我的选框有一些问题，我需要制作纯css和css3。所以我几乎这样做了，但是出现了一些错误。采取行动

我的CSS：

.cssmarquee {
  height: 25px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color:red;
}

.cssmarquee div {

  width: auto;
  height: 30px;
  position: absolute;
  animation: cssmarquee 5s linear infinite;
    background-color:blue;
    color: #FFF;
}
.cssmarquee div:hover {
animation-play-state: paused;
}

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

问题是.cssmarquee div不是固定宽度。所以我不能将他的固定宽度传递给@keyframe 100％{left：????所以你需要在100％宽度后等待才能完成并再次重复。任何人都可以帮助我

Answer 1

也许代替left你可以使用transform。像这样example

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

<强>更新：从左到右看这个example。我更新了这种风格：

.cssmarquee div {   
  width: 100%;
  transform:translateX(100%);
}

我给它宽度为100％并将默认转换设置为100％

更新 2：

看看这个example。它返回使用left而不是transform，并使用width:auto

Marquee与Css3动画

1 个答案: