使用 CSS 自动滚动答案

【问题标题】：Auto scrolling with CSS使用 CSS 自动滚动
【发布时间】：2013-03-07 07:30:47
【问题描述】：

在我的网站 [基于 wordpress] 中，我有一个项目滑块（技术上带有一些文字的图像）。但是那个滑块不是自动滚动的，有一个左右滑动的按钮。

http://i47.tinypic.com/97uxz4.jpg

我想删除该按钮并使其自动滑动。我不想使用任何 javascript 。我想用 CSS 来完成。如果可以的话，有可能吗？

如果不可能，那么最短的解决方案是什么，这是我的工作地点

http://aniyanetworks.net/Blog

【问题讨论】：

你也许可以使用animations:developer.mozilla.org/en-US/docs/CSS/Tutorials/…
如果您根本不需要任何用户控件，CSS3 动画可以在现代浏览器中运行。不过，我不确定 JavaScript 出了什么问题。
@isherwood 老实说，我不擅长 JS :(
是时候改变它了。 :-) 相对而言，jQuery 让它非常直观。
@isherwood: offtopic:我知道非常基础的JS，现在如果我学习jquery，我可以避免JS吗？

标签： css animation scroll

【解决方案1】：

1.) 您不能使用 CSS 或纯 HTML 启动 DOM 操作。你总是需要一种操作语言（比如 JavaScript）

2.) 您可以通过覆盖当前 CSS 来移除按钮，并调整 visibility 或 display 标记以使它们消失或（占位符）不可见。

最后，您确实需要 JavaScript 来触发动态隐藏并使用setIntervals 实现自动滑动。

编辑：

这可能是你为滑块设置动画的东西：

#container {
  height: 200px;
  width: 800px;
  border: 1px solid #333;
  overflow: hidden;
  margin: 25px auto;
}

#box {
  background: orange;
  height: 180px;
  width: 400px;
  margin: 10px -400px;
  -webkit-animation-name: move;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: right;
  -webkit-animation-timing-function: linear;
}

#box:hover {
  -webkit-animation-play-state: paused;
}

@-webkit-keyframes move {
  0% {
    margin-left: -400px;
  }
  100% {
    margin-left: 800px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>HTML</title>
  <link rel="stylesheet" href="main2.css" type="text/css" />
</head>

<body>
  <div id="container">
    <div id="box">as</div>
  </div>
</body>

</html>

结果

这是仅限 WebKit 的版本。这些是其他浏览器的等价物：

@ 关键帧：

@-moz-keyframes move {
@-o-keyframes move {
@keyframes move {

#box 内部（仅显示一个属性作为示例）：

-moz-animation-name: move;
-o-animation-name: move;
animation-name: move;

【讨论】：

非常感谢，对我帮助很大
还有一件事，鼠标悬停时如何停止动画？
@ShuvroShuvro，在:hover 上设置animation-play-state: paused。我更新了我的答案。
@LinusCaldwell：其实，我不知道该怎么感谢你。你刚刚拯救了我的一天。我不知道如何投票给你的答案，也许他们不会让我投票，因为我是新人:(。非常感谢

【解决方案2】：

这是使用animations 的示例（Fiddle）。您可以将此应用于您的.post-list：

.post-list {
    animation: slide infinite 3s alternate;
}

@keyframes slide {
  0% {
    margin-left: 0px;
  }
  50% {
    margin-left: -100px;
  }
  100% {
    margin-left: -200px;
  }
}

要禁用悬停动画，请使用：

.post-list:hover {
    animation-play-state: paused;
}

不要忘记 Allendars 回答中的供应商前缀（-webkit-... 等）。

但当然你必须玩。这应该只是它如何工作的提示。

【讨论】：

谢谢，@keyframes 是什么？
那是 css3 animations。我已经发布了一个链接，您可以在其中获取有关您问题的第一条评论的信息。
您的 Fiddle 不完整 Linus，请更新它以至少显示对动画的引用。有关更多详细信息，请查看我的答案，这是一个工作版本。
@Allendar，您的意思是可能会回答中的代码，对吧？我的小提琴已经在工作了。
中性 animation 在 Safari 中似乎不起作用。我想我基于这个事实判断错误。代码似乎可以使用额外的伪样式:)

【解决方案3】：

这是一个在有限和无限元素宽度下自动滚动的示例：

/*use this js if your element width is unlimited an you want to scroll in a 
constant speed. else, you dont need this js code*/
var elemWidth = document.getElementById('scroll-element').offsetWidth;
var time = elemWidth/80; /* 80 = scrolling speed (44px/s)*/
document.getElementById('scroll-element').style.cssText = "animation: scroll "+time+"s linear infinite;"

.scroll-box{
    white-space: nowrap;
    font-size: 1.1em;
    overflow: hidden;
    padding: 20px 0;
    background-color: green;
}
.scroll-container{
  width: fit-content;
  direction: rtl; /*if you want to scroll left to right set dir to ltr */
}
#scroll-element{
  background-color: yellow;
  padding: 10px;
}

@-webkit-keyframes scroll{
  0% {
    margin-right: 0%; /*if you want to scroll left to right set margin-left*/
    
  }
  100%{
    margin-right: 100%;/*if you want to scroll left to right set margin-left*/
  }
}

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>HTML</title>
    	<link rel="stylesheet" href="main2.css" type="text/css" />
    </head>
    <body>
      <div class="scroll-box">
       <div class="scroll-container">
        <span id="scroll-element">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        </span>
       </div>
      </div>
    </body>
    </html>

【讨论】：